从嵌套对象循环 javascript

Question

我有一个 javascript 对象，它有一个名为 interaction 的嵌套数组，现在我想做的是从主数组的每个对象循环并从 interaction 数组中获取值，我是一种具有迭代和循环的新手。下面是对象

var data = [{
    'id':'1',
  'boothid':[{'id':'1','name':'yyy'}],
  'interaction':[{
    'userid':'1',
    'username':'user1',
  },{
    'userid':'2',
    'username':'user2',
  }]
},
{
    'id':'2',
  'boothid':[{'id':'2','name':'xxx'}],
   'interaction':[{
    'userid':'4',
    'username':'user4',
  },
  {
    'userid':'5',
    'username':'user5',
  },
  {
    'userid':'6',
    'username':'user6',
  }],
  'resource':'2',
},
{
    'id':'3',
  'boothid':[{'id':'2','name':'zzz'}],
   'interaction':[{
    'userid':'4',
    'username':'user4',
  }],
  'resource':'3',
}]

    

console.log(data);

预期输出

  yyy
  {
   "userid": "1",
   "username": "user1"
  }
  {
   "userid": "2",
   "username": "user2"
  }
  xxx
   {
     "userid": "4",
     "username": "user4"
   }
   {
     "userid": "5",
     "username": "user5"
   }
   {
      "userid": "6",
      "username": "user6"
    }
    zzz
    {
      "userid": "4",
      "username": "user4" 
    }

这里我想要实现的是，我想从数据对象循环并在前端显示它，所以基本上输出将在 3 table 秒内以受人尊敬的展位名称 ex： table1= xxx，table2=yyy，table3=zzz，特定展位中的用户将显示在他们的 td table.

Answer 1

我建议你使用map功能。

var data = [
  {
    'id':'1',
    'boothid':[{'id':'1','name':'yyy'}],
    'interaction':[
      {'userid':'1', 'username':'user1'},
      {'userid':'2', 'username':'user2'}
    ]
  },
  {
    'id':'2',
    'boothid':[{'id':'2','name':'xxx'}],
    'interaction':[
      {'userid':'4', 'username':'user4'},
      {'userid':'5', 'username':'user5'},
      {'userid':'6', 'username':'user6'}
    ]
  }
];

var result = data.map(({boothid, interaction}) => ({
  boothname: boothid[0].name, 
  interaction
}));

console.log(result);

Answer 2

let interactions = [];

data.map(obj => {
    interactions.push({
        boothname: obj.boothid[0].name,
        interactions: obj.interaction,
    })
})

您可以使用地图遍历“数据”数组，它会在迭代中为您提供每个元素，您可以在其中从“obj.boothid”中选择 boothname，并从“obj.interaction”中选择交互。

Answer 3

您可以使用 .map。我做了一些假设：

在撰写本文时，预期输出在“迭代”数组中的单个对象中具有非唯一属性。也许您打算将该对象拆分为单独的对象，每个对象都有自己的“用户名”属性.
“迭代”是一个不存在的词。也许你的意思是“互动”。
在示例中，boothid 数组始终有一个条目。我假设情况总是如此。

代码：

let data = [{id:'1',boothid:[{id:'1',name:'yyy'}],interaction:[{userid:'1',username:'user1',},{userid:'2',username:'user2',}]},{id:'2',boothid:[{id:'2',name:'xxx'}],interaction:[{userid:'4',username:'user4',},{userid:'5',username:'user5',},{userid:'6',username:'user6',}],resource:'2',},{id:'3',boothid:[{id:'2',name:'zzz'}],interaction:[{userid:'4',username:'user4',}],resource:'3',}];

let result = data.map(o => ({
    boothname: o.boothid[0].name,
    interactions: o.interaction.map(({username}) => ({ username }))
}));

console.log(result);

Answer 4

你可以试试这个。

var data = [
{
  'id':'1',
  'boothid':[{'id':'1','name':'yyy'}],
  'interaction':[{
    'userid':'1',
    'username':'user1',
    },{
    'userid':'2',
    'username':'user2',
  }]
},
{
    'id':'2',
  'boothid':[{'id':'2','name':'xxx'}],
   'interaction':[{
    'userid':'4',
    'username':'user4',
  },
  {
    'userid':'5',
    'username':'user5',
  },
  {
    'userid':'6',
    'username':'user6',
  }],
  'resource':'2',
},
{
    'id':'3',
  'boothid':[{'id':'2','name':'zzz'}],
   'interaction':[{
    'userid':'4',
    'username':'user4',
  }],
  'resource':'3',
}];

var result = data.map(({boothid, interaction}) => ({
  boothname: boothid[0].name, 
  interaction: interaction.map(({username}) => username)
}));

console.log(result);

Answer 5

朋友们感谢你的回复和想法，正如安迪提到的link以上评论帮助我得到了所需的答案。下面是我的回答

var data = [{
    'id':'1',
  'boothid':[{'id':'1','name':'yyy'}],
  'interaction':[{
    'userid':'1',
    'username':'user1',
  },{
    'userid':'2',
    'username':'user2',
  }]
},
{
    'id':'2',
  'boothid':[{'id':'2','name':'xxx'}],
   'interaction':[{
    'userid':'4',
    'username':'user4',
  },
  {
    'userid':'5',
    'username':'user5',
  },
  {
    'userid':'6',
    'username':'user6',
  }],
  'resource':'2',
},
{
    'id':'3',
  'boothid':[{'id':'2','name':'zzz'}],
   'interaction':[{
    'userid':'4',
    'username':'user4',
  }],
  'resource':'3',
}]



for (let i of data){
console.log(i.boothid[0].name);
    for(let j of i.interaction ){
            console.log(j);
  }
}

从嵌套对象循环 javascript

loop from nested object javascript

javascript

loops

nested-loops