Estoy usando una API de código abierto para recuperar cervecerías cuando las personas buscan por nombre de ciudad. Puedo consolar. registre la promesa devuelta, pero cuando intento hacer un bucle y consola. registrar los datos, me dice que no está definido.
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); });Debe recorrer el resultado de res.json() . Haces esto con otro .then() .
Y llamar a encodeURI() sin usar el resultado no tiene ningún efecto. Debería llamar a encodeURIComponent() en el nombre de la ciudad y usarlo en el 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))); }res.json() también devuelve una Promesa que debe esperar usando then() o await , que es sin duda mi opción preferida.
Tenga en cuenta que no es necesario codificar en URL toda la cadena, ya que la URL de la API ya está codificada correctamente, por lo que solo necesita codificar en URI el nombre de la ciudad. Otra cosa que probablemente debería hacer es esperar a que se cargue el DOM mediante el evento DOMContentLoaded antes de asignar detectores de eventos, ya que, de lo contrario, podrían surgir problemas porque el elemento DOM podría no estar aún presente.
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>Has registrado la promesa pero no has analizado ese JSON. No puede recorrer una matriz si no existe. Y, debido a que es una matriz, debería usar un bucle for (const b of data)... .
Aquí hay una versión abreviada.
// 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); } }); });