Estoy trabajando en un sitio web que extraerá datos de una API y mostrará los elementos en una lista. Obtuve este código de otra fuente en línea, pero solo se muestran los datos codificados, no los datos de la API. ¿Hay algún problema con mi javascript?
Aquí está mi código actual a continuación:
<!DOCTYPE html> <html> <head></head> <body> <ul id="myList"></ul> <script> let displayList = ['Apples', 'Oranges', 'Grapes', 'Berries', 'Watermelon']; fetch(`https://pokeapi.co/api/v2/pokemon`) .then(function(response){ return response.json() }) .then((data) => { data.results.forEach((item) => { displayList.push(item.name) }) console.log(displayList) }) .catch((err) => { console.log(`Error fetching: ${err}`) }); var list = document.getElementById("myList"); displayList.forEach((item) => { let li = document.createElement("li"); li.innerText = item; list.appendChild(li); }); </script> </body> </html>También intenté colocar la extracción de API en una etiqueta de secuencia de comandos de encabezado para que envíe los datos antes de que el cuerpo se cargue de esta manera:
<!DOCTYPE html> <html> <head> <script> let displayList = ['Apples', 'Oranges', 'Grapes', 'Berries', 'Watermelon']; fetch(`https://pokeapi.co/api/v2/pokemon`) .then(function(response){ return response.json() }) .then((data) => { data.results.forEach((item) => { displayList.push(item.name) }) console.log(displayList) }) .catch((err) => { console.log(`Error fetching: ${err}`) }); </script> </head> <body> <ul id="myList"></ul> <script> var list = document.getElementById("myList"); displayList.forEach((item) => { let li = document.createElement("li"); li.innerText = item; list.appendChild(li); }); </script> </body> </html>Los datos de la API de Pokémon se registrarán en la consola, pero no en la lista que verá el usuario.
NOTA: Esto es solo una prueba de concepto, el código se moverá/formateará según sea necesario después, también seré mi propia API personalizada para el proyecto final si esta información cambia algo
Debe volver a llamar a la parte de la pantalla cuando reciba sus nuevos datos. Entonces en .then agregue lo siguiente:
.then((data) => { data.results.forEach((item) => { displayList.push(item.name) }) displayList.forEach((item) => { let li = document.createElement("li"); li.innerText = item; list.appendChild(li); }) console.log(displayList) });Porque no está utilizando un enfoque asíncrono para su parte de visualización. Acabo de agregar otro then de su llamada api para mostrarle una posible solución
<!DOCTYPE html> <html> <head></head> <body> <ul id="myList"></ul> <script> let displayList = ['Apples', 'Oranges', 'Grapes', 'Berries', 'Watermelon']; fetch(`https://pokeapi.co/api/v2/pokemon`) .then(function(response){ return response.json() }) .then((data) => { var list = document.getElementById("myList"); data.results.forEach((item) => { displayList.push(item.name); let li = document.createElement("li"); li.innerText = item.name; list.appendChild(li); }) console.log(displayList) }) .catch((err) => { console.log(`Error fetching: ${err}`) }); </script> </body> </html>