如何在反应中迭代对象数组

问题描述

我正在一个项目中，我必须从API中获取数据。 数据请求后，响应数据具有如下结构：

  Data: [
   {s:1,d:2,f:3},{s:3,d:1,f:2},{s:2,d:3,f:1} 
];

我的问题是，我想遍历Data中的每个对象并显示其属性和值。

曾尝试使用Object.(keys,entries)，但它们只会使情况变得更糟（也许是因为，我不太了解它们的工作原理）。

解决方法

假设Data是一个数组（您犯了一个错误并使用了花括号），则它是一个对象数组。您需要“深入内部”进入每个数组条目，并在其上调用Object.entries。 Object.entries将每个密钥对值变成一个密钥对元组。

const entries = Data.map(entry => Object.entries(entry))
// [
//     ['s',1],['d',2],['f',3],//     and so on
// ]

,

我将数据数组更正为有效的JS数据结构，希望您是这个意思。

使用 forEach 遍历数组中的对象。从对象中获取 Object.entries 键/值对，并在第二个 forEach 中打印它们。

let data= [
   {s:1,d:2,f:3},{s:3,d:1,f:2},{s:2,d:3,f:1} 
];

data.forEach(obj => {
  Object.entries(obj).forEach(([key,value]) => {
    console.log('Key: ' + key + '  Value: ' + value);
  })
})