如何在反應中遍歷對象數組

Question

我正在做一個項目，我必須從 API 獲取數據。 在數據請求之后，響應數據具有如下結構：

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

我的問題是，我想遍歷Data中的每個 object 並顯示它的屬性和值。

曾嘗試使用Object.(keys, entries)但它們只會讓事情變得更糟（也許是因為，我不太了解它們是如何工作的）。

Answer 1

假設Data是一個數組（你犯了一個錯誤並使用了花括號），它是一個對象數組。 您需要“進入”每個數組條目並在其上調用Object.entries 。 Object.entries將每個密鑰對值轉換為一個密鑰對元組。

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

Answer 2

我將數據數組更正為有效的 JS 數據結構，我希望你是這個意思。

使用forEach遍歷數組中的對象。 使用 Object 獲取來自 object的鍵/值對並在第二個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); }) })