javascript对象数组迭代
javascript对象数组迭代
提问于 2018-09-24 05:46:41
我有如下的Json数据；
let data = [
{
"name": "John Doe",
"position": "Accountant",
"social": ["facebook", "instagram", "youtube", "pinterest"]
},
{
"name": "Michael Schumaher",
"position": "F1 Pilot",
"social": ["facebook", "instagram", "youtube", "pinterest"]
}
];我需要循环迭代节点和名为social的子数组。
let html = '';
let i;
for ( i = 0; i < data.length; i++) {
let socArr = data[i].social;
socArr.forEach ( function ( item ) {
console.log( item + '/');
});
};我需要在同一个div中显示'name position social‘，但是forEach循环给出了json文档中的所有数组数据。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-24 06:56:02
我不能复制你所说的行为。您应该能够迭代每个记录(数组的元素)，然后迭代它的值：
let data = getData();
let body = document.querySelector('body')
let fragment = document.createDocumentFragment() // used for performance
let text = (str) => document.createTextNode(str) // used to reduce/simplify code
let br = () => document.createElement('br') // used to reduce/simplify code
data.forEach(rcd => {
// create new div for each record
let div = document.createElement('div')
// iterate over record values
for (let value of Object.values(rcd)) {
div.appendChild(text(value))
div.appendChild(br())
}
// add to fragment
fragment.appendChild(div)
});
// add to DOM
body.appendChild(fragment);
// Data structure is placed in function so logic SO is seen first
function getData() {
return [{
"name": "John Doe",
"position": "Accountant",
"social": ["facebook", "instagram", "youtube", "pinterest"]
},
{
"name": "Michael Schumaher",
"position": "F1 Pilot",
"social": ["facebook", "instagram", "youtube", "pinterest"]
}
]
}div {
border: 1px solid;
padding: .5rem;
margin: 1em
}
Stack Overflow用户
发布于 2018-09-24 05:52:47
与您的问题相关，我假设您只需要两个div元素。因此，对于该场景，我将在html body中创建两个静态div，然后向它们提供循环。如下例所示：
let data = [
{
"name": "John Doe",
"position": "Accountant",
"social": ["facebook", "instagram", "youtube", "pinterest"]
},
{
"name": "Michael Schumaher",
"position": "F1 Pilot",
"social": ["facebook", "instagram", "youtube", "pinterest"]
}
];
for (let i = 0; i < data.length; i++) {
document.getElementById('myDiv' + (i + 1)).innerHTML = data[i].name + '<br/>' + data[i].position + '<br/>';
let socArr = data[i].social;
socArr.forEach ( function ( item ) {
document.getElementById('myDiv' + (i + 1)).innerHTML += item + '<br/>';
});
document.getElementById('myDiv' + (i + 1)).innerHTML += '<br/>';
}<div id="myDiv1"></div>
<div id="myDiv2"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52470547
复制相关文章
相似问题