1

Lo que pasa es que quiero leer un archivo JSON y que en cuanto lo lea cree una tabla a partir del archivo con sus campos respectivos. Como por ejemplo:

{
"nombre":"Ana",
"edad":20,
"Hobbie":"Cantar" }

Y se cree la tabla: Nombre Edad Hobbie Ana 20 Cantar introducir la descripción de la imagen aquí

2
  • 2
    Saludos Aza Jero, bienvenido/a a StackOverflow en Español :D Te invito a que vayas por el recorrido: es.stackoverflow.com/tour para que veas el funcionamiento del sitio y de paso obtengas tu primera medalla, para finalizar el comentario, por curiosidad, ¿Qué has intentado?
    – fredyfx
    Commented el 10 mar. 2018 a las 17:00
  • 1
    ¿Qué has intentado hacer? ¿Con qué dificultades te estás encontrando? ¿Estás usando algún framework o biblioteca? Esta pregunta es muy amplia tal cual está redactada. Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información y consejos.
    – Alvaro Montoro
    Commented el 11 mar. 2018 a las 3:10

3 respuestas 3

2

Hola mi solución va por este lado, inserta el siguiente código en tus script y haz el llamado que corresponda. Debes llamar a la función pasandole la variable que tiene la data en formato json.

function jsonToHtmlTable(data) {

    data = JSON.parse(data);

    var table = document.createElement("table");
    var thead = table.createTHead();
    var tbody = table.createTBody();

    var col = [];
    for (var i = 0; i < data.length; i++) {
        for (var key in data[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }

    var cabecera = thead.insertRow(-1);

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");
        th.innerHTML = col[i];
        cabecera.appendChild(th);
    }



    for (var i = 0; i < data.length; i++) {

        tr = tbody.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = data[i][col[j]];
        }
    }

    return table;

};
1

Te comento lo siguiente sería primero ideal que muestre un avance sobre como lo estas construyendo.

Sin embargo te muestro un ejemplo que justo acabo de hacer donde ocupo

1.- VueJS (Para volcar o acomodar la data de una manera mas simple dentro de una tabla en mi HTML)
2.- Axios(para manejo de las peticiones AJAX) 3.- Para que VueJS funcione necesita estar dentro del contexto de una etiqueta HTML con un id, que yo por ejemplo le puse app 4.- Con la directiva v-for obtengo el mismo resultado de recorrido como si usara un bucle foreach pero de una manera mas limpia a nivel de código 5.- Declaro un arreglo vacio llamado datos que después de la petición por medio de Axios se irá llenando de forma dinámica 6.- el método mounted se usa para indicar que el código de la instancia de Vue funcione una vez que dicha instancia este creada y lista

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Sex</th>
            </tr>
            <tr v-for="dato in datos">
                <td>{{ dato.name }}</td>
                <td>{{ dato.age }}</td>
                <td>{{ dato.sex }}</td>
            </tr>
        </table>
    </div>
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                datos: []
            },
            methods: {
                getDatos: function() {
                    axios.get('data.json'). then(response => {
                        this.datos = response.data
                    })
                }
            },
                mounted: function (){
                    this.getDatos()
                }
        })
    </script>
</body>
</html>

Justo aquí debajo te dejo el data.json que me invente para el ejemplo, ambos los pongo en la misma carpeta

[
    {
        "name": "Alfredo",
        "age": 28,
        "sex": "masculino"
    },
    {
        "name": "Jorge",
        "age": 20,
        "sex": "masculino"
    }
]

El siguiente es el aspecto final y claro esta dentro de una tabla pero no tiene estilos

introducir la descripción de la imagen aquí Pruebalo en tu equipo así como te lo paso y debería ser funcional saludos.

5
  • Perdón por no subir el avance, se me hizo interesante la manera en que utilizas el Vue, pero lo que no hallo como hacer es que el nombre de las columnas sea el mismo que el de JSON, por ejemplo si cambio el: "nombre":"Ana" por "name" : "Ana". debe cambiar el nombre de la columna.
    – Aza Jero
    Commented el 10 mar. 2018 a las 18:58
  • el nombre de las columnas en la tabla HTML tu lo asignas a voluntad para que sean iguales a los de tu JSON no hay problema
    – user75901
    Commented el 10 mar. 2018 a las 18:59
  • Es que lo que no quiero es que los nombres sean fijos y se puedan cambiar al momento de modificar el archivo
    – Aza Jero
    Commented el 10 mar. 2018 a las 19:16
  • Dame oportunidad y más tarde te respondo
    – user75901
    Commented el 10 mar. 2018 a las 19:20
  • Si, muchas gracias de antemano
    – Aza Jero
    Commented el 10 mar. 2018 a las 19:22
1

Aquí te dejo una pequeña función en JavaScript puro que, pasándole un array de objetos y el id de una tabla, va a rellenar la tabla dinámicamente. El código está comentado (y se podría reducir un poco porque se repite), pero aquí dejo una descripción de cómo funciona:

  • Usa .keys() para obtener las claves de índice del primer elemento del array de objetos (se asume que todos los objetos van a tener las mismas claves).
  • Se crea una fila de cabecera dinámica con las claves de índice (no importa cuáles sean, puedes probar con diferentes JSON y seguirá funcionando).
  • Se atraviesa el array de objetos, rellenando las celdas con los datos del objeto.

Aquí lo puedes ver funcionando:

// estos datos los podrías obtener via AJAX 
var datos = [
  {
    "nombre": "Ana",
    "edad": 20,
    "Hobbie": "Cantar"
  },
  {
    "nombre": "Alberto",
    "edad": 23,
    "Hobbie": "Programar Videojuegos"
  }
];

// llama a la función que genera la tabla
crearTablaDesdeArrayObjetos(datos, "miTabla");

//---------------------------------------

function crearTablaDesdeArrayObjetos(misDatos, idTabla) {
  var claves = [];

  // generamos la cabecera basada en las claves del primer elemento
  if (misDatos.length > 0) {
    // con Object.keys(array) obtenemos las claves del objeto
    claves = Object.keys(misDatos[0]);
    // creamos una fila
    let fila = document.createElement("tr");
    // para cada clave
    for (let x = 0; x < claves.length; x++) {
      // creamos una celda y rellenamos los datos
      let celda = document.createElement("th");
      celda.textContent = claves[x];
      fila.append(celda);
    }
    // añadimos la fila a la tabla
    document.getElementById(idTabla).append(fila);
  }

  for (let x = 0; x < misDatos.length; x++) {
    let fila = document.createElement("tr");
    // para cada clave
    for (let y = 0; y < claves.length; y++) {
      // creamos una celda y rellenamos los datos
      let celda = document.createElement("td");
      celda.textContent = misDatos[x][claves[y]];
      fila.append(celda);
    }
    // añadimos la fila a la tabla
    document.getElementById(idTabla).append(fila);
  }
}
<table id="miTabla">
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.