Estoy tratando de traer datos de un archivo json externo y usarlo para generar una tabla. Me encuentro con un problema en la línea 52 'Error de tipo no detectado: no se puede convertir indefinido o nulo en objeto en Function.keys'. Cuando comento las primeras 2 funciones asíncronas, use los datos de muestra en la variable 'montañas' y haga referencia a 'montañas' en lugar de los usuarios que genera la tabla html como se esperaba. Creo que el problema tiene que ver con mi segunda función asíncrona, pero soy un novato perdido. ¡Cualquier ayuda apreciada!
async function getUsers() { let url = '../assets/names.json'; try { let res = await fetch(url); return await res.json(); } catch (error) { console.log(error) } } async function users() { let users = await getUsers() } /* let mountains = [ { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" }, { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" }, { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" }, { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" }, { name: "Monte Amiata", height: 1738, place: "Siena" } ]; */ function generateTableHead(table, data) { let thead = table.createTHead(); let row = thead.insertRow(); for (let key of data) { let th = document.createElement("th"); let text = document.createTextNode(key); th.appendChild(text); row.appendChild(th); } } function generateTable(table, data) { for (let element of data) { let row = table.insertRow(); for (key in element) { let cell = row.insertCell(); let text = document.createTextNode(element[key]); cell.appendChild(text); } } } let table = document.querySelector("table"); let data = Object.keys(users[0]); generateTableHead(table, data); generateTable(table, users);Dado que fetch es asíncrono, debe procesar los datos solo una vez que fetch los recibe
esto debería darte una idea
async function getUsers() { let url = '../assets/names.json'; try { let res = await fetch(url); return res.json(); } catch (error) { console.log(error); } } async function fakeGetUsers() { // fake delay await new Promise(res => setTimeout(res, 1000)); // simulate return res.json(); return [{name:"Monte Falco",height:1658,place:"Parco Foreste Casentinesi"}, {name:"Monte Falterona",height:1654,place:"Parco Foreste Casentinesi"}, {name:"Poggio Scali",height:1520,place:"Parco Foreste Casentinesi"}, {name:"Pratomagno",height:1592,place:"Parco Foreste Casentinesi"}, {name:"Monte Amiata",height:1738,place:"Siena"}]; } async function users() { const users = await fakeGetUsers(); // here you can use the data function generateTableHead(table, data) { let thead = table.createTHead(); let row = thead.insertRow(); for (let key of data) { let th = document.createElement("th"); let text = document.createTextNode(key); th.appendChild(text); row.appendChild(th); } } function generateTable(table, data) { for (let element of data) { let row = table.insertRow(); for (key in element) { let cell = row.insertCell(); let text = document.createTextNode(element[key]); cell.appendChild(text); } } } const table = document.querySelector("table"); const data = Object.keys(users[0]); generateTableHead(table, data); generateTable(table, users); } users(); <table></table>