¡Hola!
Tengo un pequeño problema. He intentado mucho pero aún no he encontrado una solución. ^^
Hay un archivo json con múltiples valores. Me gustaría escribir los valores del archivo en una tabla HTML con Javascript (¡no php!).
Aquí hay un ejemplo:
Archivo JSON:
{ "628e191673ae8f7750c62fce": { "name": "John", "surname": "Smith", "age": "24" }, "628e1fd0d27981c6250d886c": { "name": "Fred", "surname": "Bloggs", "age": "32" }, "628e20c805f38641bdc08d7d": { "name": "Joe", "surname": "Harris", "age": "27" } }La tabla entonces debería verse así:
| Nombre | Apellido | Años |
|---|---|---|
| John | Herrero | 24 |
| Fred | blogs | 32 |
| José | harris | 27 |
¿Cuál es la mejor manera para mí de hacer esto con Javascript? Gracias de antemano. :)
Bueno, tu JSON es un poco especial ya que tus filas de datos no son una matriz, son propiedades... Pero podrías hacerlo así...
const jsonData = { "628e191673ae8f7750c62fce": { "name": "John", "surname": "Smith", "age": "24" }, "628e1fd0d27981c6250d886c": { "name": "Fred", "surname": "Bloggs", "age": "32" }, "628e20c805f38641bdc08d7d": { "name": "Joe", "surname": "Harris", "age": "27" } }; var firstIteration = true; // create table element for(var key1 in jsonData) { /* key1 will be the hex name */ var row = jsonData[key1]; // create tr element if (firstIteration) { for(var key2 in row) { /* key2 will be the attributes of the current row */ // create th element with key2 as content } firstIteration = false; } for(var key2 in row) { // create td element with row[key2] as content } // close tr element } // close table elementPuede dividir el código en pequeñas funciones del tamaño de un bocado que construyen la tabla fila por fila creando cadenas HTML en el camino y luego agregándolas al DOM.
const data = {"628e191673ae8f7750c62fce":{name:"John",surname:"Smith",age:"24"},"628e1fd0d27981c6250d886c":{name:"Fred",surname:"Bloggs",age:"32"},"628e20c805f38641bdc08d7d":{name:"Joe",surname:"Harris",age:"27"}}; // Returns a simple cell function getCell(data) { return `<td>${data}</td>`; } // Returns an string of cells HTML // `map` returns an array so we need to `join` // the elements together function getRow(data) { return data.map(getCell).join(''); } // Returns a set of rows by `mapping` // over the values of each object, and creating // a new row for each object function getRows(data) { return data.map(obj => { const values = Object.values(obj); return `<tr>${getRow(values)}</tr>`; }).join(''); } // Get the object values from the data const objs = Object.values(data); // Get the keys from the first object of `objs`. // This way we don't have to hard-code the headings // in the HTML markup const headers = Object.keys(objs[0]); // Construct a table using the functions const table = ` <table> <tbody> <tr class="headings">${getRow(headers)}</tr> ${getRows(objs)} </tbody> </table> ` // Add everything to a container document.body.insertAdjacentHTML('beforeend', table); table { border-collapse: collapse; border: 1px solid #454545; width: 300px;} .headings { background-color: #efefef; font-weight: 600; text-transform: capitalize; } td { padding: 0.3em; border: 1px solid #efefef;}Documentación adicional
Manera simple de hacerlo:
const jsonfile = { "628e191673ae8f7750c62fce": { "name": "John", "surname": "Smith", "age": "24" }, "628e1fd0d27981c6250d886c": { "name": "Fred", "surname": "Bloggs", "age": "32" }, "628e20c805f38641bdc08d7d": { "name": "Joe", "surname": "Harris", "age": "27" } } const parent = document.getElementById('table'); Object.keys(jsonfile).forEach(element => { const { name, surname, age } = jsonfile[element] let child = `<tr> <th>${name}</th> <th>${surname}</th> <th>${age}</th> </tr>` parent.insertAdjacentHTML('beforeend', child); }); <table id="table"> <tr> <th>Name</th> <th>Surname</th> <th>Age</th> </tr> </table>