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:
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.