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); } }