循环通过具有javascript数组的json对象

What I'm trying to output with JS:

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

My 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);

Can someone explain how do I get the value of the inner for loop and combine it with the outer for loop so that I end up with output I'm trying to achieve. currently I end up with this:

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

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

2 个解决方案

#1

the problem is that you overwrite the html variable in every iteration of the outer for-loop.

问题是你在外部for循环的每次迭代中都覆盖了html变量。

If you declare this variable before the loop, you get the right result. Also you don't want to overwrite the theimages variable everytimes, but append the new portion to it.

如果在循环之前声明此变量,则会得到正确的结果。此外,您不希望每次都覆盖theimages变量,而是将新部分附加到它。

var html = '';
for(var i=0; i < data.length; i++) {
  var item = data[i];
  var theimages = '';
  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);

Also I have removed your obj-variable, since you did not use it anyway.

此外,我已删除了你的obj变量,因为你还没有使用它。

Just use this pattern, if you build strings: var myString = '' for(item ...) { myString += item } At first initialize the string, then append.

只需使用这种模式,如果你构建字符串:var myString =''for(item ...){myString + = item}首先初始化字符串,然后追加。

#2

You just need to append it to the string, instead of reassigning the variable again and again:

您只需将其附加到字符串,而不是一次又一次地重新分配变量:

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);

#1