循环遍历具有 javascript 数组的 json 对象

Question

我想用 JS 输出什么：

<ul>
  <li>title1
    <ul>
      <li>image1</li>
      <li>image2</li>
      <li>image3</li>
   </ul>
  </li>
  <li>title2
    <ul>
      <li>image1</li>
      <li>image2</li>
      <li>image3</li>
   </ul>
  </li>

...and so forth...

</ul>

JSON：

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"]
    }
];

我的 JS

for(var i=0; i < data.length; i++) {
  var item = data[i];
  var obj = {
      title:item.title,
      image:item.image
  };
  var theimages;
  var html = '';

    for(j=0; j < item.image.length; j++) {
         theimages = '<li>' + item.image[j] + '</li>'; 
    }

html += '<li>' + item.title + '<ul>';
html += theimages;
html += '</ul></li>';
} 
console.log(html);

有人可以解释我如何获得内部 for loop 的值并将其与外部 for loop 结合起来，以便最终得到我想要实现的输出。目前我最终得到了这个：

<li>title4
  <ul>
    <li>image3</li>
  </ul>
</li>

Answer 1

您只需要将它附加到字符串中，而不是一次又一次地重新分配变量：

var theimages;
var html = '<ul>';
for(var i=0; i < data.length; i++) {
  var item = data[i];
  var obj = {
      title:item.title,
      image:item.image
  };


for(j=0; j < item.image.length; j++) {
         theimages += '<li>' + item.image[j] + '</li>'; 
    }

html += '<li>' + item.title + '<ul>';
html += theimages;
html += '</ul></li>';
}  
html += '</ul>';
console.log(html);