Estoy tratando de pasar información de una llamada API a una tabla HTML que luego también puedo usar para gráficos. Se adjunta una imagen de la matriz para mostrar la estructura de datos. Sigo recibiendo un error de que column_names no es iterable, pero no he podido resolverlo después de horas de búsqueda. Creo que tiene que ver con los nombres en mi matriz, pero no puedo encontrar una solución. Soy nuevo en esto y siento que la respuesta es dolorosamente simple, por lo que agradecería cualquier ayuda o explicación de mi error.
Formato de matriz
async function loadintotable(url, table) { const tableHead = table.querySelector('thead'); const tableBody = table.querySelector('tbody'); const response = await fetch(url); const { column_names, data } = await response.json(); tableHead.innerHTML = '<tr></tr>'; tableBody.innerHTML = ''; for (const headerText of column_names) { const headerElement = document.createElement('th'); headerElement.textContent = headerText; tableHead.querySelector('tr').appendChild(headerElement); } for (const row of data) { const rowElement = document.createElement('tr'); for (const cellText of row) { const cellElement = document.createElement('td'); cellElement.textContent = cellText; rowElement.appendChild(cellElement); } tableBody.appendChild(rowElement); } }
Su respuesta api es de formato
{ dataset: { column_names: [], data: [] } }
Entonces, para acceder a column_names y datos, debe
const json = await response.json(); const { column_names, data } = json.dataset;
O en una línea
const { column_names, data } = (await response.json()).dataset;
Observe el .dataset al final de la línea