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

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

javascript arrays json for-loop

循环遍历具有javascript数组的json对象,javascript,arrays,json,for-loop,Javascript,Arrays,Json,For Loop,我试图用JS输出的内容： <ul> <li>title1 <ul> <li>image1</li> <li>image2</li> <li>image3</li> </ul> </li> <li>title2 <ul> <li>image1</

我试图用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>

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

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

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

var图像；
var html=''；
对于（变量i=0；i'；
}
html+=''+item.title+''；
html+=图像；
html+=''；
}  
html+=''；
log（html）；

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

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

var图像；
var html=''；
对于（变量i=0；i'；
}
html+=''+item.title+''；
html+=图像；
html+=''；
}  
html+=''；
log（html）；

问题在于，在外部for循环的每次迭代中都会覆盖html变量

如果在循环之前声明此变量，则会得到正确的结果。此外，您不希望每次都覆盖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);

var html=''；
对于（变量i=0；i'；
}
html+=''+item.title+''；
html+=图像；
html+=''；
} 
log（html）；

我还删除了您的obj变量，因为您没有使用它

如果构建字符串，只需使用此模式： var myString='' 对于（项目…）{ myString+=项目 }

首先初始化字符串，然后追加。

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

如果在循环之前声明此变量，则会得到正确的结果。此外，您不希望每次都覆盖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);

var html=''；
对于（变量i=0；i'；
}
html+=''+item.title+''；
html+=图像；
html+=''；
} 
log（html）；

我还删除了您的obj变量，因为您没有使用它

如果构建字符串，只需使用此模式： var myString='' 对于（项目…）{ myString+=项目 }

首先初始化字符串，然后追加。

在

for

循环中，应该使用

+=

，就像在

图像+=…

中一样，因此它总是添加到字符串的末尾，而不是替换它。您正在覆盖for循环中的images变量。在

for

循环中，您应该使用

+=

，就像在

图像+=…

中一样，因此它总是添加到字符串的末尾，而不是替换它。您正在覆盖for循环中的images变量。在ul和内部循环看起来是由外部forloop索引递增之后，我就没有定义了

标题1
- 图像1
- 图像2
- 标题2
  - 图像1
  - 图像3