[英]Looping through json object that has an array with javascript
我想用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>
您只需将其附加到字符串,而不是一次又一次地重新分配变量:
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);
问题是你在外部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);
我也删除了你的obj变量,因为你还没有使用它。
只需使用这种模式,如果你构建字符串:var myString =''for(item ...){myString + = item}首先初始化字符串,然后追加。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.