Me estoy quedando un poco atascado con este. Estoy tratando de usar javascript en mi sitio web para convertir mis datos API JSON en una tabla. Sin usar una matriz en una matriz de datos en JSON, funciona bien con cada elemento en una nueva línea, pero tan pronto como uso una matriz de datos anidada allí, tiene todos los datos en una línea, separados por una coma. Pensar que un ciclo for funcionaría aquí, pero no estoy 100% seguro de si este es el mejor método. Intenté varias búsquedas en línea y probé a mi alrededor, pero parece que no puedo hacer que funcione.
La siguiente es una versión simple de los datos JSON con los que estoy trabajando:
MACLIST = ["ABC","DEF"] IPLIST = ["10.10.10.10","20.20.20.20"] ZONELIST = ["Inside","Outside"] var json = [{"MAC":MACLIST,"IP":IPLIST,"ZONE":ZONELIST},{"SOMETHING ELSE":"OK"}];Guión utilizado:
$(document).ready(function () { ko.applyBindings({ teams: json }); });HTML utilizado:
<table> <thead> <tr> <th>Device</th> <th>IP</th> <th>Zone</th> </tr> </thead> <tbody data-bind="foreach: teams"> <tr> <td data-bind="text: MAC"></td> <td data-bind="text: IP"></td> <td data-bind="text: ZONE"></td> </tr> </tbody> </table>La versión JSON de trabajo (sin datos de matriz anidados) funciona:
var json = [{"MAC":"ABC","IP":"10.10.10.10","ZONE":"Inside"},{"MAC":"DEF","IP":"20.20.20.20","ZONE":"Outside}];Cualquier sugerencia o consejo sería muy apreciado.
URL de prueba JSFiddle Link
Puede mapear sobre cada fila para crear una cadena de html para cada fila. Luego, dentro de cada fila, mapee sobre cada columna para crear la cadena de html para cada celda.
var json = [{ "MAC": "ABC", "IP": "10.10.10.10", "ZONE": "Inside" }, { "MAC": "DEF", "IP": "20.20.20.20", "ZONE": "Outside" }]; const makeCell = (content) => { return `<td>${content}</td>` } const makeRow = (content) => { return `<tr>${content}</tr>` } const table = document.querySelector('.table') const colHeaders = Object.keys(json[0]).map(key => makeCell(key)).join('') const bodyRows = json.map(row => { return makeRow(Object.keys(row).map(col => makeCell(row[col])).join('')) }).join('') document.querySelector('thead tr').innerHTML = colHeaders document.querySelector('tbody').innerHTML = bodyRows <table> <thead> <tr></tr> </thead> <tbody> </tbody> </table>Espero que este artículo te ayude a resolver el problema.
https://www.geeksforgeeks.org/how-to-convert-json-data-to-a-html-table-using-javascript-jquery/