title: How to create a nested list by limiting the functions each?
body: <p>I would like to create a list of nested "ul li" but limiting the nested functions to each other.</p>
  
  <p>Here is my object :</p>
  
  <pre><code>        "data": [
           {
            "label": "dataName",
            "sections": [
              {
              "label": "label sections 1",
              "fields": [
                {
                 "id": 1,
                 "name": "field 1",
                 "value": "value field 1"
                },
                {
                "id": 2,
                "name": "field 2",
                "value": "value field 2"
                }
               ]
              },
              {
              "label": "label sections 2",
              "fields": [
              {
               "id": 5,
               "name": "field 3",
               "value": "value field 3"
              }
             ]
            }, 
            {
            "label": "dataName2",
            "sections": [
              {
              "label": "label sections 3",
              "fields": [
                {
                 "id": 6,
                 "name": "field 6",
                 "value": "value field 6"
                },
                {
                "id": 7,
                "name": "field 7",
                "value": "value field 7"
                }
               ]
              },
              {
              "label": "label sections 4",
              "fields": [
              {
               "id": 8,
               "name": "field 8",
               "value": "value field 8"
              }
             ]
            }
  
           ]
  </code></pre>
  
  <p>to turn it into a list like this:</p>
  
  <pre><code>      &lt;ul&gt;
            &lt;li&gt;dataName
              &lt;ul&gt;
                &lt;li&gt;label sections 1
                   &lt;ul&gt;
                      &lt;li&gt;field 1 : value field 1 &lt;/li&gt;
                      &lt;li&gt;field 2 : value field 2 &lt;/li&gt;
                   &lt;/ul&gt;
                &lt;/li&gt; 
                 &lt;li&gt;label sections 2
                   &lt;ul&gt;
                      &lt;li&gt;field 3 : value field 3 &lt;/li&gt;
                   &lt;/ul&gt;
                &lt;/li&gt; 
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;dataName2
              &lt;ul&gt;
                &lt;li&gt;label sections 3
                   &lt;ul&gt;
                      &lt;li&gt;field 6 : value field 6 &lt;/li&gt;
                      &lt;li&gt;field 7 : value field 7 &lt;/li&gt;
                   &lt;/ul&gt;
                &lt;/li&gt; 
                 &lt;li&gt;label sections 4
                   &lt;ul&gt;
                      &lt;li&gt;field 8 : value field 8 &lt;/li&gt;
                   &lt;/ul&gt;
                &lt;/li&gt; 
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>I tried to perform a function but without much success !</p>
  
  <p>knowing that if the "value field" value is null, it will not be displayed</p>
  
  <pre><code>         var build = function(obj) {
  
      var list = '';
      _.each(obj, function (elt) {
  
          list+='&lt;li&gt;&lt;em&gt;'+elt.label+'&lt;/em&gt;&lt;/li&gt;';
          _.each(elt.sections, function (elt) {
              var list2 = '';
              list2+='&lt;li&gt;&lt;em&gt;'+elt.label+'&lt;/em&gt;&lt;/li&gt;';
              _.each(elt.fields, function (elt) {
                  var list3 = '';
                  if(!_.isNull(elt.value)) {
                      list3 += '&lt;li&gt;&lt;em&gt;' + elt.name 
                      +' ' + elt.value + '&lt;/em&gt;&lt;/li&gt;';
                  }
                  list2+='&lt;ul&gt;'+list3+'&lt;/ul&gt;';
              });
              list+='&lt;ul&gt;'+list2+'&lt;/ul&gt;';
          });
      });
      return '&lt;ul style="text-align: left"&gt;'+list+'&lt;/ul&gt;';
  }
  </code></pre>
  
  <p>if you know a more effective solution, I'm interested</p>