2

tengo un problema, estoy trabajando en una web service y no tengo mucha idea de como se trabaja con web porque soy muy nuevo en el tema, ahora mismo recibo de un sistema de control un JSON con esta estructura:

var valoresRepro = {
    duracionGrabacion: "",
    fechaInicio:"",
    flujos:{
        anchoBandaSalida:"",
        fSintoniaSalida:"",
        filtroEnvio:"",
        idFlujo:"",
        ipDestino:"",
        puerto:""
    },
    idReproduccion:"",
    idToken:"",
    instanteTiempo:"",
    numeroBytesReproducidos:"",
    numeroDDCs:"",
    tamanoGrabacion:"",
    tasaDeTransferencia:"",
    tiempoTranscurrido:"",
    tipoReproduccion:"",
    url:""
};

Por otro lado tengo una estructura hecha igual que el JSON para las cabeceras de la tabla que es esta:

var valoresCabeceraRepro = {
    duracionGrabacion: "Duración (s)",
    fechaInicio:"Fecha",
    flujos:{
        anchoBandaSalida:"Ancho de banda salida(Hz)",
        fSintoniaSalida:"Freq sintonia salida (Hz)",
        filtroEnvio:"Filtro envío",
        idFlujo:"ID Flujo",
        ipDestino:"IP Destino",
        puerto:"Puerto"
    },
    idReproduccion:"Id reproducción",
    idToken:"ID Token",
    instanteTiempo:"Instante de tiempo",
    numeroBytesReproducidos:"Nº Bytes reproducidos",
    numeroDDCs:"Nº DDCs",
    tamanoGrabacion:"Tamaño (KB)",
    tasaDeTransferencia:"Tasa de transferencia",
    tiempoTranscurrido:"Tiempo transcurrido (s)",
    tipoReproduccion:"Tipo de reproducción",
    url:"URL"
};

Como podeis ver en ambas estructuras hay un dato llamado flujos que tiene dentro una estructura anidada. Con esto la opción que había barajado era hacer una tabla con otra anidada en la columna flujos, algo de este estilo: introducir la descripción de la imagen aquí

Imagino que la idea sería hacer una tabla normal y al llegar al campo flujos añadir otra tabla en esa columna, pero no tengo muy claro el como hacerlo. Tengo otra tabla generada de manera similar pero sin el tema del campo anidado, etse es el código, no se si desde aquí se podrá modificar un poco para poder solucionarlo:

function dibujarGrabaciones(datos) {
    var divGrabaciones = document.getElementById("contGrabaciones");
    divGrabaciones.innerHTML = "";

    var tabla = document.createElement("table");
    tabla.className = "table tablaGrabaciones";
    tabla.setAttribute("data-toggle", "table");
    var tr, th, text, td, thead, input;

    //table header
    thead = document.createElement("thead");

    //input selector header
    th = document.createElement("th");
    text = document.createTextNode("#");
    th.appendChild(text);
    thead.appendChild(th);
    tabla.appendChild(thead);

    for (todosValores in valores) {
        th = document.createElement("th");
        th.className = todosValores;
        th.setAttribute("data-sortable", "true");
        text = document.createTextNode(valoresCabecera[todosValores]);
        th.appendChild(text);
        thead.appendChild(th);
        tabla.appendChild(thead);
    }

    //table body
    for (var i = 0; i < obtenerJSONValores(datos, "RespConsultaGra", "grabaciones").length; i++) {
        //selector checkbox, primera columna
        tr = document.createElement("tr");
        td = document.createElement("td");
        input = document.createElement("input");
        input.setAttribute("type", "checkbox");
        input.setAttribute("id", obtenerJSONValores(datos, "RespConsultaGra", "grabaciones")[i]["idToken"]);
        td.appendChild(input);
        tr.appendChild(td);
        tabla.appendChild(tr);

        //resto de valores
        for (todosValores in valores) {
            td = document.createElement("td");
            td.className = todosValores;
            if (todosValores == "fecha") {
                text = document.createTextNode(new Date(obtenerJSONValores(datos, "RespConsultaGra", "grabaciones")[i][todosValores] * 1000).toLocaleString());
            }
            if (todosValores == "tamano") {
                text = document.createTextNode(Math.round(obtenerJSONValores(datos, "RespConsultaGra", "grabaciones")[i][todosValores] / 1024));
            }
            else {
                text = document.createTextNode(obtenerJSONValores(datos, "RespConsultaGra", "grabaciones")[i][todosValores]);
            }
            td.appendChild(text);
            tr.appendChild(td);
        }
        tabla.appendChild(tr);
    }

    $("#contGrabaciones").html(tabla.outerHTML);
    $('[data-toggle="table"]').bootstrapTable();
}

Muchas gracias.

2 respuestas 2

1

Una opción sin que se te complique tanto es que segun la foto de la tabla que pusiste, en lugar de una tabla dentro del campo td, crees una tabla de 8 columnas y incluyendo los campos que quieres mostrar de la propiedad flujos. Luego en el head de la tabla, al elemento que engloba a las columnas de flujos solo le tienes que poner el atributo colspan=5.

Edito para responder a tu comentario. Yo digo que no hace falta crear una tabla dentro de un td. puedes hacer un estilo a este ejemplo sin necesidad de eso:

<thead>
   <tr>
     <th rowspan="2">Company</th>
     <th colspan="3">Contact</th>
     <th rowspan="2">Country</th>
   </tr>
   <tr>
     <th>campo1</th>
     <th>campo2</th>
     <th>campo3</th>
   </tr>
</thead>
<tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>campo1</td>
    <td>campo2</td>
    <td>campo3</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>campo1</td>
    <td>campo2</td>
    <td>campo3</td>
    <td>Mexico</td>
  </tr>
</table>

Si ves como queda esta tabla, es lo que tu necesitas o pides

1
  • Hola, lo primero de todo gracias pero tenía un pequeño problema en la foto, lo que preguntaba era para hacer lo mismo que tu habías comentado, algo como la foto de ahora (lo he editado) Siendo así no temino de entender el cómo introduzco una tabla dentro de otra, si se puede hacer de alguna manera automática o como... Gracias de todos modos
    – Walo
    Commented el 3 jun. 2022 a las 12:35
1

No es necesario crear nuevas tablas, puedes hacer uso de los atributos:

  • colspan - Para que una celda ocupe 2 o más columnas
  • rowspan - Para que ocupe 2 o más filas

Referencia: https://developer.mozilla.org/es/docs/Web/HTML/Element/td#attr-colspan

En tu caso, el título de "Flujos" necesita llenar tantas columnas como elementos haya en el arreglo. Y cada celda de valor (excepto flujos) ocupará 2 filas, dejando espacio para encabezados / valores.

// Esto debe ser un arreglo de objetos
let valoresRepro = [
  {
    duracionGrabacion: "150",
    fechaInicio:"2022-06-03",
    flujos:{
        anchoBandaSalida:"ABS",
        fSintoniaSalida:"FSS",
        filtroEnvio:"FE",
        idFlujo:"123",
        ipDestino:"127.0.0.1",
        puerto:"8080"
    },
    idReproduccion:"456",
    idToken:"abc123",
    instanteTiempo:"50",
    numeroBytesReproducidos:"15625",
    numeroDDCs:"5",
    tamanoGrabacion:"27",
    tasaDeTransferencia:"4400",
    tiempoTranscurrido:"90",
    tipoReproduccion:"tipo",
    url:"https://www.google.com.mx/"
  }
];


let valoresCabeceraRepro = {
    duracionGrabacion: "Duración (s)",
    fechaInicio:"Fecha",
    flujos:{
        anchoBandaSalida:"Ancho de banda salida(Hz)",
        fSintoniaSalida:"Freq sintonia salida (Hz)",
        filtroEnvio:"Filtro envío",
        idFlujo:"ID Flujo",
        ipDestino:"IP Destino",
        puerto:"Puerto"
    },
    idReproduccion:"Id reproducción",
    idToken:"ID Token",
    instanteTiempo:"Instante de tiempo",
    numeroBytesReproducidos:"Nº Bytes reproducidos",
    numeroDDCs:"Nº DDCs",
    tamanoGrabacion:"Tamaño (KB)",
    tasaDeTransferencia:"Tasa de transferencia",
    tiempoTranscurrido:"Tiempo transcurrido (s)",
    tipoReproduccion:"Tipo de reproducción",
    url:"URL"
};

function dibujaTabla(encabezados, valores) {
    // Obtener tabla y limpiar
    let tabla = document.querySelector('#tabla');
    tabla.innerHTML = '';
    // Crear encabezado
    let thead = document.createElement('thead');
    let tr = document.createElement('tr');
    // Crear encabezados creando un arreglo de claves
    Object.keys(encabezados).forEach(nombre => {
        // Crear celda para cada encabezado
        let th = document.createElement('th');
        if(nombre == 'flujos') {
            // Si es "flujos", aplicar colspan y título "Flujos"
            th.colSpan = Object.keys(encabezados.flujos).length;
            th.innerText = 'Flujos';
        } else {
            // Asignar título
            th.innerText = encabezados[nombre];
        }
        // Agregar a fila
        tr.appendChild(th);
    });
    // Agregar fila a encabezados de tabla
    thead.appendChild(tr);
    // Agregar encabezados a tabla
    tabla.appendChild(thead);
    // Crear cuerpo de tabla
    let tbody = document.createElement('tbody');
    // Recorrer cada elemento de valores para crear filas
    valores.forEach(valor => {
        // Crear fila por cada elemento
        let tr = document.createElement('tr');
        // Recorrer por clave
        Object.keys(valor).forEach(nombre => {
            if(nombre == 'flujos') {
                // Si es flujos, recorrer para agregar encabezados
                Object.keys(valor.flujos).forEach(flujo => {
                    let td = document.createElement('td');
                    // Nombre del flujo
                    td.innerText = encabezados.flujos[flujo];
                    tr.appendChild(td);
                });
            } else {
                let td = document.createElement('td');
                // Valor de cada dato
                td.innerText = valor[nombre];
                // Debe ocupar dos filas
                td.rowSpan = 2;
                tr.appendChild(td);
            }
        });
        // Agregar fila de valores y encabezados de flujos
        tbody.appendChild(tr);

        // Crear nueva fila para valores de flujos
        tr = document.createElement('tr');
        // Recorrer flujos para agregar valores
        Object.values(valor.flujos).forEach(flujo => {
            let td = document.createElement('td');
            td.innerText = flujo;
            tr.appendChild(td);
        });
        // Agregar fila de valores de flujos
        tbody.appendChild(tr);
    });
    // Agregar cuerpo a tabla
    tabla.appendChild(tbody);
}

dibujaTabla(valoresCabeceraRepro, valoresRepro);
<table id="tabla" border="1">
</table>

Podría simplificarse si solo creas un título para flujos, a menos que cada objeto pueda tener diferentes propiedades, pero eso sería un poco más complicado de lograr y, tal vez, sí sería necesario crear tablas internas.

Lecturas recomendadas:

  • Object.keys() - Obtener arreglo desde propiedades de un objeto
  • Object.values() - Obtener arreglo desde valores de propiedades de un objeto

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.