Javascript JSON 從值中獲取 id

Question

我一直在研究 javascript 應用程序，我正在嘗試使用不同的鍵/值對獲取“id”的值。 我的 JSON：

{
  "data": [
    {
      "value": "Hermitage Park",
      "type": "Park",
      "id": 2
    }
  ]
}

我的 Javascript：

function GetID(value) {
    var output = 0
    fetch("http://localhost:8088/data").then(storage => 
        storage.json()).then(items => {
            for (i = 0; i < items.length; i++) {              
                if (items[i]["value"] == value) {
                    output = i
                    break
                }
            }             
    })
    return output
}

在調用 function 時，我指定了“Hermitage Park”作為值，希望取回“id”屬性的值，即 2。對我來說似乎正確，但它總是返回 0，而應該是 2。我還嘗試了items[value]["id"]和items[value].id ，但到目前為止沒有任何效果。

Answer 1

Fetch 是一個異步 function 所以你需要讓 GetID function 異步，基本上我們不能從異步 function 中返回並將其分配給變量。 您可以通過以下方式進行：

async function GetID(value) {
  var output = null;
  let response = await fetch("../myjson.json");
  let result = await response.json();
  let data = result["data"];

  for (let i = 0; i < data.length; i++) {
    if (data[i]["value"] === value) {
      output = data[i]["id"];
    }
  }
  return output;
};
GetID("Hermitage Park").then( value => console.log(value));

從這個 function 我們將得到一個 Promise 然后我們可以從那個 Promise 中得到這個值。 如您所見，代碼的最后一行https://dev.to/johnpaulada/synchronous-fetch-with-asyncawait

Answer 2

fetch是一個異步方法，它返回一個Promise 。 你真的很親近！ 缺少的是GetID()沒有返回fetch返回的 promise 。 由於它沒有返回 promise ，因此 function 的調用者無法等待該值。 請求最終得到解決，但 function 已經返回0並且您的代碼繼續執行。

這可以重寫為：

function GetID(value) {
    return fetch("http://localhost:8088/data")
        .then(resp => resp.json())
        .then(({ data }) => {
            const item = data.find(item => item.value === value);
            return item.id;
    });
}