Estoy aprendiendo JavaScript y tratando de dominar lo que debería ser un proceso básico, obteniendo datos de un archivo .json y enviándolos a una tabla HTML.
No hay problema cuando descomento las primeras 7 líneas de código y comento las siguientes 3 líneas que usan 'fetch'. Sin embargo, cuando trato de 'obtener' y mostrar los datos de otro archivo, aparece el error que indiqué en la línea n.º 39 (let data = Object.keys(mountains[0]. Revisé console.log y ' names.json' está allí como se esperaba, por lo que el problema no está en la ruta del archivo o en la solicitud de búsqueda. Creo que mi problema está en la línea 39 con la función 'Object.keys'. No sé cómo haga referencia a los datos json que se obtuvieron. ¡Se agradece cualquier ayuda!
/*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" } ]; */ (fetch("names.json") .then(res => res.json() .then(json => console.log(json)))) function generateTableHead(table, data) { let thead = table.createHead(); 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(mountains[0]); //****************************** Uncaught ReferenceError: mountains is not defined generateTable(table, mountains); // generate the table first generateTableHead(table, data); // then the headPuedes intentar algo como esto:
fetch("names.json") .then(res => res.json()) .then(json => { console.log(json) // you need to get mountains from json // if json is in the shape that is needed then leave as it is const mountains = json let table = document.querySelector("table"); let data = Object.keys(mountains[0]); generateTable(table, mountains); // generate the table first generateTableHead(table, data); // then the head })Cuando comenta las primeras 7 líneas de código, la variable de las montañas se vuelve indefinida ya que aún no se ha creado. Entonces, para ejecutar este código, puede hacer sus cosas dentro de la segunda devolución de llamada de la función de búsqueda, es decir, cuando obtiene los datos en formato json, como:
function generateTableHead(table, data) { let thead = table.createHead(); 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); } } } fetch("names.json") .then(res => res.json()) .then(json => { let mountains = json; let table = document.querySelector("table"); let data = Object.keys(mountains[0]); generateTable(table, mountains); // generate the table first generateTableHead(table, data); // then the head })