时间戳

首页 > 解决方案 > javascript对象数组迭代

javascript - javascript对象数组迭代

问题描述

我有如下的 Json 数据；

  let data = [
  {
    "name": "John Doe",
    "position": "Accountant",
    "social": ["facebook", "instagram", "youtube", "pinterest"]
  },
  {
    "name": "Michael Schumaher",
    "position": "F1 Pilot",
    "social": ["facebook", "instagram", "youtube", "pinterest"]
  }
];

我需要循环迭代节点和称为社交的子数组。

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 文档中的所有数组数据。

标签： javascriptjsonloopsiteration

解决方案

与您的问题相关，我假设您只需要两个div元素。因此，对于这种情况，我会div在您的 html中创建两个静态变量body，然后使用该循环提供它们。请参见下面的示例：

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>

推荐阅读