如何在反应中遍历对象数组答案

【问题标题】：How can I iterate through an arrayofobjects in react如何在反应中遍历对象数组
【发布时间】：2020-11-30 12:26:27
【问题描述】：

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

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

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

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

【问题讨论】：

这可能不是响应的实际格式，当然也不是JS对象。请编辑您的问题以使其更准确。
关于如何迭代数组和对象有很多很多的问题。请至少进行一些搜索并在您的问题中显示该研究的结果。请参阅How to Ask，第一部分标题为搜索和研究。

标签： javascript reactjs api endpoint

【解决方案1】：

假设Data 是一个数组（你弄错了，使用了花括号），它是一个对象数组。您需要“进入”每个数组条目并在其上调用Object.entries。 Object.entries 将每个密钥对值转换为一个密钥对元组。

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

【讨论】：

Data.map 将返回 map 不是函数
您确定您的Data 键是一个数组并且您正在正确访问它吗？如果Data 是对象，map 将不起作用，您需要向我们提供更多信息
好的...将尽我所能提供更多信息。现在我的网络很差

【解决方案2】：

我已将数据数组更正为有效的 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);
  })
})

【讨论】：