title: Looping through json object that has an array with javascript
body: <p><strong>What I'm trying to output with JS</strong>:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;title1
      &lt;ul&gt;
        &lt;li&gt;image1&lt;/li&gt;
        &lt;li&gt;image2&lt;/li&gt;
        &lt;li&gt;image3&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;title2
      &lt;ul&gt;
        &lt;li&gt;image1&lt;/li&gt;
        &lt;li&gt;image2&lt;/li&gt;
        &lt;li&gt;image3&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
  
  ...and so forth...
  
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JSON:</strong></p>
  
  <pre><code>var data = [
      {
          title: "title1", 
          image:["image1", "image2", "image3"]
      },
      {
          title: "title2", 
          image:["image1", "image2", "image3"]
      },
      {
          title: "title3", 
          image:["image1", "image2", "image3"]
      },
      {
          title: "title4", 
          image:["image1", "image2", "image3"]
      }
  ];
  </code></pre>
  
  <p><strong>My JS</strong></p>
  
  <pre><code>for(var i=0; i &lt; data.length; i++) {
    var item = data[i];
    var obj = {
        title:item.title,
        image:item.image
    };
    var theimages;
    var html = '';
  
      for(j=0; j &lt; item.image.length; j++) {
           theimages = '&lt;li&gt;' + item.image[j] + '&lt;/li&gt;'; 
      }
  
  html += '&lt;li&gt;' + item.title + '&lt;ul&gt;';
  html += theimages;
  html += '&lt;/ul&gt;&lt;/li&gt;';
  } 
  console.log(html);
  </code></pre>
  
  <p>Can someone explain how do I get the value of the inner <code>for</code> <code>loop</code> and combine it with the outer <code>for</code> <code>loop</code> so that I end up with output I'm trying to achieve. currently I end up with this:</p>
  
  <pre><code>&lt;li&gt;title4
    &lt;ul&gt;
      &lt;li&gt;image3&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>