Estoy usando el comando fetch() para obtener una matriz de datos en formato JSON. Estoy usando la función fetchURL() para obtener datos en formato JSON. Yo uso async-await . Luego, en cada dato recibido, intento agregar su campo de inicio de login a una lista ordenada que he creado en el archivo HTML.
He creado una función createListItem() para encontrar la etiqueta de la lista ordenada en el archivo HTML y agregarle el campo de inicio de login . Pero primero trato de almacenar todos los campos de login de sesión en una matriz arr . Pero no puedo almacenar los campos de login de sesión en él.
Pero cuando uso directamente la función createListItem() para crear un elemento de lista con el campo de inicio de sesión como texto, puedo agregar estos campos a la lista ordenada y, por lo tanto, obtengo la lista ordenada. Estoy comentando las líneas que me dan salida directa en la ventana del navegador cuando no almaceno los campos de login de sesión en el arr :
Código:
function createListItem(text) { const parent = document.getElementsByTagName("ol"); const entry = document.createElement("li"); entry.textContent = text; parent[0].appendChild(entry); } const url = "https://api.github.com/users "; async function fetchURL() { return (await fetch(url)).json(); } let arr = []; async function createList() { const data = await fetchURL(); for (let i = 0; i < data.length; i++) { //createListItem(`${data[i].login}`); arr.push(data[i].login); } } createList();está obteniendo los datos en una matriz, necesita crear una lista después de llamar a la función createList() :
createList().then(function(){ arr.forEach(element => { createListItem(element); }); }); también puede definir arr en la función createList y devolver eso, entonces su código sería así:
async function createList() { let arr = []; const data = await fetchURL(); for (let i = 0; i < data.length; i++) { //createListItem(`${data[i].login}`); arr.push(data[i].login); } return arr; } createList().then(arr=>{ arr.forEach(element => { createListItem(element); }); });Puede lograr su objetivo con solo una función asíncrona:
const url="http://jsonplaceholder.typicode.com/users"; async function getList(u){ const arr=(await fetch(u).then(r=>r.json())).map(e=>e.username); document.querySelector("ol").innerHTML=arr.map(u=>`<li>${u}</li>`).join(""); console.log(arr); } getList(url); <h2>List of login names</h2> <ol></ol> <p>end of page</p> En el fragmento anterior, utilicé el recurso público proporcionado por typicode.com y extraje la propiedad de nombre de username en lugar de inicio de login .