如何检索和循环访问从获取请求中检索到的数据？

Question

我正在使用开源 api 在人们按城市名称搜索时检索啤酒厂。我可以安慰。记录返回的承诺，但是当我尝试循环和 console.log 数据时，它告诉我未定义。

const searchBtn = document.getElementById('beer-search-button');

const getBeerData = (cityName) => {
    const beerApi = `https://api.openbrewerydb.org/breweries?by_city=${cityName}`;
    encodeURI(beerApi);
    fetch(beerApi)
    .then(res => {
        if(res.ok) {
            console.log(res.json());
            for(let b in res) {
                console.log(b.name);
            }
        } else {
            console.log('Error!');
        }
    });
}

searchBtn.addEventListener('click', function(e) {
    e.preventDefault;
    let searchQuery = document.getElementById('city-input').value;
    
    getBeerData(searchQuery);
});

Answer 1

您需要循环 res.json() 的结果。你用另一个 .then().

来做这个

并且在不使用结果的情况下调用 encodeURI() 没有任何效果。您应该在城市名称上调用 encodeURIComponent()，并在 URI 中使用它。

const getBeerData = (cityName) => {
  const beerApi = `https://api.openbrewerydb.org/breweries?by_city=${encodeURIComponent(cityName)}`;
  fetch(beerApi)
    .then(res => {
      if (res.ok) {
        return res.json()
      } else {
        throw "Error";
      }
    }).then(res => res.forEach(b => console.log(b.name)));
}

Answer 2

res.json() 也是 returns 您需要使用 then() 或使用 await 等待的 Promise，这当然是我的首选。

请注意，不需要对整个字符串进行 URL 编码，因为 API 的 URL 已经正确编码，因此您只需要对城市进行 URI 编码姓名。您可能应该做的另一件事是在分配事件侦听器之前使用 DOMContentLoaded event 等待 DOM 加载，否则可能会出现问题，因为 DOM 元素可能尚未存在。

const getBeerData = async (cityName) => {
  const beerApi = `https://api.openbrewerydb.org/breweries?by_city=${encodeURIComponent(cityName)}`;
  const res = await fetch(beerApi);
  if (res.ok) {
    const breweries = await res.json();
    breweries.forEach(brewery => console.log(brewery));
  } else {
    console.log("Error!");
  }
};

window.addEventListener("DOMContentLoaded", event => {
  const searchBtn = document.getElementById("beer-search-button");

  searchBtn.addEventListener("click", async function (e) {
    e.preventDefault;
    let searchQuery = document.getElementById("city-input").value;
  
    await getBeerData(searchQuery);
  });
})

<input type="text" id="city-input" name="city-input">
<button id="beer-search-button">Search for breweries!</button>

Answer 3

您已记录承诺，但尚未解析 JSON。如果数组不存在，则不能遍历它。而且，因为它是一个数组，所以你应该使用 for/of loop for (const b of data)....

这是一个简化版。

// Get the data
fetch(beerApi)

  // Parse the data
  .then(res => res.json())

  // Loop over the data
  .then(data => {
    for (const b of data) {
      console.log(b.name);
    }

  });

});

如何检索和循环访问从获取请求中检索到的数据？

How can I retrieve and loop through data retrieved from a fetch request?

javascript

api

fetch-api