javascript对象数组迭代答案

【问题标题】：javascript object array iterationjavascript对象数组迭代
【发布时间】：2019-02-27 10:43:18
【问题描述】：

我有如下 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 中显示“姓名位置社交”，但 forEach 循环为我提供了 json 文档中的所有数组数据。

【问题讨论】：

您的代码正在遍历节点和社交数组。你想要的最终输出是什么？
“但是 forEach 循环给了我所有的数组数据” 这就是 forEach 应该做的，遍历数组的每个元素。如果您只想要数组的某个元素，则仅访问该特定元素，即socArr[1]
我想将所有社交名称附加到一个图标的类中。社交数组的数量也不清楚，它会是任何数字。

标签： javascript json loops iteration

【解决方案1】：

与您的问题有关，我假设您只需要两个 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>

【讨论】：

这个和 OP 的唯一区别是你在两个循环中都使用了 forEach，无论哪种方式你都将使用任何一种方法访问相同的东西。

【解决方案2】：

我无法复制您所说的行为。您应该能够遍历每条记录（数组的元素），然后遍历其值：

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
}

【讨论】：