從沒有特定鍵值的 Object 創建對象數組

Question

您好，這是我在這個平台上的第一個問題，所以請隨時刪除或編輯，或留下批評。

所以我在反應中解析來自 API 的數據。 數據看起來像這樣。

data = {
  "20": "john",
  "20.5": "jim",
  "21": "bob",
  "21.5": "james",
  "22": "carl",
  "23": "linda",
  "25": "jack",
  "25.5": "kyla",
  "26": "jenny",
}

我正在嘗試使用這些數據動態更新網頁。 我需要訪問年齡（鍵）和名稱（值）。

我將對象的鍵值對放入一個數組中，這樣我就可以使用array.map()將它們內聯 map ，我的代碼如下。

var Array = []

    for (const [key, value] of Object.entries(data)) {
      Array.push({
        age: key,
        name: value,
      });
    }

現在，這在很大程度上完成了我正在嘗試做的事情。 output 是一個新陣列。

[
  { age: '20', name: 'john' },
  { age: '21', name: 'bob' },
  { age: '22', name: 'carl' },
  { age: '23', name: 'linda' },
  { age: '25', name: 'jack' },
  { age: '26', name: 'jenny' },
  { age: '20.5', name: 'jim' },
  { age: '21.5', name: 'james' },
  { age: '25.5', name: 'kyla' }
]

現在的問題是它們的順序與給出的順序不同。 由於某種原因，.5 個年齡都排在數組的末尾。 這是array.push()的限制嗎？ 我對Object.entries() function 做錯了什么嗎？ 還是應該在創建數組后簡單地使用排序方法？

Answer 1

迭代對象時，升序的整數鍵總是排在第一位。 解決此類問題的最佳方法是更改后端，以便它為您提供所需的對象數組，而不是您需要稍后修復的有點損壞的格式。

如果這不可能，您必須在客戶端通過獲取所有條目，然后對其進行排序來修復它。

 const input = { 20: 'john', 20.5: 'jim', 21: 'bob', 21.5: 'james', 22: 'carl', 23: 'linda', 25: 'jack', 25.5: 'kyla', 26: 'jenny' }; const result = Object.entries(input).map(([age, name]) => ({ age, name })).sort((a, b) => a.age - b.age); console.log(result);

您可能還需要修復 API 以便它為您提供正確的 JSON，因為

{
      20: john
      20.5: jim

不是有效的語法。