Tengo el siguiente documento JSON
{
"paciente": {
"id": 1234,
"nombre": "Pablo Andrés Agudelo Marenco",
"sesion": {
"id": 12345,
"juego": [
{
"nombre": "bonzo",
"nivel": [
{
"id": 1234,
"nombre": "caida libre",
"segmento": [
{
"id": 12345,
"nombre": "Hombro",
"movimiento": [
{
"id": 1234,
"nombre": "Flexion",
"metricas": [
{
"min": 12,
"max": 34,
"media": 23,
"moda": 20
}
]
},
{
"id": 12345,
"nombre": "Extensión",
"metricas": [
{
"min": 12,
"max": 34,
"media": 23,
"moda": 20
}
]
}
]
},
{
"id": 12345,
"nombre": "Escápula",
"movimiento": [
{
"id": 1234,
"nombre": "Protracción",
"metricas": [
{
"min": 12,
"max": 34,
"media": 23,
"moda": 20
}
]
},
{
"id": 12345,
"nombre": "Retracción",
"metricas": [
{
"min": 12,
"max": 34,
"media": 23,
"moda": 20
}
]
}
]
}
],
"___léeme___": "El array 'iteraciones' contiene las vitorias o derrotas con el tiempo en segundos de cada iteración",
"iteraciones": [
{
"victoria": true,
"tiempo": 120
},
{
"victoria": false,
"tiempo": 232
}
]
}
]
}
]
}
}
}
Este documento a pesar de tener una estructura definida, en el arreglo segmento
dependiendo de si es el caso o no pueden venir unos datos y en ocasiones no.
Asi las cosas, algunas veces el elemento segmento
puede tener uno, dos y hasta tres valores dentro de su array.
"paciente": ...
"sesion": ...
"juego": ...
**"segmento":[{"id": ...,"nombre":...},{"id": ...,"nombre":...},{"id": ...,"nombre":...}]**
Yo debo mostrar los valores de segmento.nombre
en un template de la siguiente manera:
Cada valor de segmento.nombre
debe mostrarse en un html div
tab, asi por ejemplo, si mi documento JSON llega con dos elementos en el array segmento
{
"segmento": [{
"id": 12345,
"nombre": "Escapula",
}, {
"id": 12345,
"nombre": "Hombro",
}]
}
Entonces, se deben mostrar estos dos valores en el template de esta forma:
El documento JSON lo leo de esta forma:
<code> ...
with open('ProcessedMetrics.json') as data_file:
session_data=json.loads(data_file.read())
context['session_data'] = session_data
<code> ...
Y en el template, estoy haciendo lo siguiente:
<!-- begin corporal segments tabs -->
<div class="nav-tabs-custom">
{% for nest1 in session_data.paciente.sesion.juego %}
{% for nest2 in nest1.items %} <!-- get all games (juego array)-->
{%for nest3 in nest2%}
<ul class="nav nav-tabs">
<li class="active">
<a href="#mano" data-toggle="tab" aria-expanded="true"><i class="fa fa-check-square">{{nest3}}</i>
</a></li>
{%endfor%}
{%endfor%}
{%endfor%}
<li><a href="#codo" data-toggle="tab" aria-expanded="false"><i class="fa fa-check-square"></i> other tab hardcoded</a></li>
</ul>
El resultado que obtengo hasta el momento es:
Como se puede detallar, capturé los valores de juego y la clave nivel.
Tengo dificultades para avanzar al valor de la clave nivel
y de ahi al array segmento
¿Cómo podría acceder a estos elementos de una forma óptima?
La idea que quiero es poder generar tantos tabs como documentos de segmento existan en su array segmento
- ACTUALIZACIÓN
De acuerdo a la respuesta dada por @German-Alzate-Martinez, además de ello, he querido adicionar la forma en como correlacionar los tabs que se generen en relación al contenido de la clave segmento
, la cual es un array en mi archivo JSON
Lo importante a tener en cuenta esta en el atributo href del tab (dentro del ul
y el div
)en donde se define un identificador (#
) el cual en mi caso es el nombre del segmento (href="#{{nest3.nombre}}"
)
Además de esto, en el contenido de ese tab, se realiza la correlación con ese tab creado en la clasetab-pane
con el id="{{nest3.nombre}}"
Esto es de esta forma:
<div class="box-body">
<!-- begin corporal segments tabs -->
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
{% for nest1 in session_data.paciente.sesion.juego %}
{% for nest2 in nest1.nivel %}
{%for nest3 in nest2.segmento%}
<li><a href="#{{nest3.nombre}}" data-toggle="tab" aria-expanded="true"><i class="fa fa-check-square"></i> {{nest3.nombre}}</a></li>
{%endfor%}
{%endfor%}
{%endfor%}
</ul>
<!--- Content of tabs generated above -->
<div class="tab-content">
{% for nest1 in session_data.paciente.sesion.juego %}
{% for nest2 in nest1.nivel %}
{%for nest3 in nest2.segmento%}
<!-- /.tab-pane Correlation with href tab above-->
<div class="tab-pane" id="{{nest3.nombre}}">
<!-- The timeline -->
<div class="box-body table-responsive no-padding">
.... More code ....
</div>
</div>
......
</div>
Es de esta forma en como yo puedo generar tabs específicos acorde al número de valores de segmentos que vengan en mi clave/array segmento
en el archivo JSON que he leido, además asocio a esos tabs con su respectivo contenido.
Lo que no he mirado bien es:
Si miramos, en el documento JSON fuente de mis datos, los segmentos tienen determinados movimientos, los cuales están anidados dentro del tab segmento
que es un array, al final del día:
Para ello enfatizo a continuación la porción de mi documento JSON en donde esto ocurre:
{
"segmento": [{
"id": 12345,
"nombre": "Hombro",
"movimiento": [{
"id": 1234,
"nombre": "Flexion",
"metricas": [{
"min": 12,
"max": 34,
"media": 23,
"moda": 20
}]
}, {
"id": 12345,
"nombre": "Extensión",
"metricas": [{
"min": 12,
"max": 34,
"media": 23,
"moda": 20
}]
}]
}, {
"id": 12345,
"nombre": "Escápula",
"movimiento": [{
"id": 1234,
"nombre": "Protracción",
"metricas": [{
"min": 12,
"max": 34,
"media": 23,
"moda": 20
}]
}, {
"id": 12345,
"nombre": "Retracción",
"metricas": [{
"min": 12,
"max": 34,
"media": 23,
"moda": 20
}]
}]
}]
}
Lo que deseo y no he podido lograr es que cuando yo hago un click en un tab o pestaña, es que si el segmento es Hombro
, por ejemplo, solo me aparezcan los movimientos que estan anidados dentro del array movimiento
que esta dentro de segmentos en el JSON.
Asi mismo también las métricas (array metricas
) que estan dentro del array de movimiento
.
De momento, y como puede verse acá, https://nrhb.herokuapp.com/sesiones-de-rehabilitacion/3 en cada tab que se genera dinámicamente acorde al número de segmentos que trae el array segmento
se pintan todos los movimientos que tiene el documento sin importar si pertenecen a un segmento en particular.
Es decir, si hago click en el tab de Hombro
, me salen los movimientos anidados que tiene el segmento Hombro
y los de Escápula
y asi en el tab de Escápula
también.
Esto ocurre porque en el contenido de cada tab en mi template html en el div
con clase tab-pane
después de mostrar la tabla, en su td
o registro respectivo estoy diciendo que accedo al array movimiento con un nuevo indice dado por un ciclo for
(buscar mas abajo la sección de ciclos anidados en donde dice {% for nest4 in nest3.movimiento %}
) y ahi estoy pintando <td>{{nest4.nombre}}</td>
Lo mismo en el ciclo {% for nest5 in nest4.metricas %}
en donde ubico cada valor con el indice nest5
, para el caso del array metricas
<div class="box-body table-responsive no-padding">
<table class="table table-bordered">
<h3>Métricas</h3>
<tbody>
<tr>
<th></th>
<th>Movimientos</th>
<th>Minimo</th>
<th>Maximo</th>
<th>Media</th>
<th>Moda</th>
</tr>
{% for nest1 in session_data.paciente.sesion.juego %}
{% for nest2 in nest1.nivel %}
{% for nest3 in nest2.segmento %}
{% for nest4 in nest3.movimiento %}
<tr>
<td>
<i class="fa fa-hand-rock-o pull-right"></i>
</td>
<!-- Ubicando los nombres de los movimientos , pero salen todos los elementos de ese array -->
<td>{{nest4.nombre}}
</td>
{% for nest5 in nest4.metricas %}
<!-- Ubicando los valores de las metricas , pero salen todos los elementos de ese array -->
<td>{{nest5.min}}</td>
<td>{{nest5.max}}</td>
<td>{{nest5.media}}</td>
<td>{{nest5.moda}}</td>
{% endfor %}
{% endfor %}
{% endfor %}
{% endfor %}
{% endfor %}
</tr>
</tbody>
</table>
</div>
Entonces mi inquietud que la hice bastante larga porque quise especificar detalles por si fuesen necesarios es como puedo filtrar en los td
o registros que me salgan los movimientos respectivos de un segmento y las metricas respectivas de un movimiento y asi poder dar utilidad a cada tab o pestaña.
Espero no haber sido inoportuno con esta consulta, y su ayuda u orientación será altaamente apreciada.