I have the following document 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
}
]
}
]
}
]
}
}
}
This document despite having a defined structure, in the segmento arrangement depending on whether it is the case or not some data can come and sometimes not.
Thus, sometimes the segmento element can have one, two and even three values within its array.
"paciente": ...
"sesion": ...
"juego": ...
**"segmento":[{"id": ...,"nombre":...},{"id": ...,"nombre":...},{"id": ...,"nombre":...}]**
I must show the values of segmento.nombre in a template as follows:
Each value of segmento.nombre should be displayed in a html div tab, so for example, if my JSON document arrives with two elements in the array segmento
{
"segmento": [{
"id": 12345,
"nombre": "Escapula",
}, {
"id": 12345,
"nombre": "Hombro",
}]
}
So, these two values should be shown in the template in this way:
The JSON document I read it this way:
<code> ...
with open('ProcessedMetrics.json') as data_file:
session_data=json.loads(data_file.read())
context['session_data'] = session_data
<code> ...
And in the template, I'm doing the following:
<!-- 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>
The result I get so far is:
As you can detail, I captured the game values and the level key.
I have difficulties to advance to the value of the key nivel and from there to the array segmento
How could I access these elements in an optimal way?
The idea that I want is to be able to generate as many tabs as there are segment documents in their array segmento
- UPDATE
According to the answer given by @ German-Alzate-Martinez , besides that , I wanted to add the way in how to correlate the tabs that are generated in relation to the content of the key segmento , which is an array in my JSON file
The important thing to keep in mind is in the href attribute of the tab (within the ul and the div ) where an identifier is defined ( # ) which in my case is the name of the segment ( href="#{{nest3.nombre}}" )
Besides this, in the content of that tab, the correlation is made with that tab created in class tab-pane with id="{{nest3.nombre}}"
This is like this:
<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>
This is how I can generate specific tabs according to the number of segment values that come in my key / array segmento in the JSON file I have read, plus I associate these tabs with their respective content.
What I have not looked at well is:
If we look, in the JSON document source of my data, the segments have certain movements, which are nested within the tab segmento that is an array, at the end of the day:
For this I emphasize next the portion of my JSON document where this occurs:
{
"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
}]
}]
}]
}
What I want and I have not been able to achieve is that when I click on a tab or tab, if the segment is Hombro , for example, only the movements that are nested within the array appear co_de % that is within segments in the JSON.
Likewise also the metrics (array movimiento ) that are inside the array of metricas .
At the moment, and as you can see here, link in each tab that is generated dynamically according to the number of segments that the movimiento array brings, all the movements of the document are painted, regardless of whether they belong to a particular segment.
That is, if I click on the segmento tab, I get the nested movements that have the segment Hombro and those of Hombro and so on the tab of Escápula as well.
This happens because in the content of each tab in my template html in Escápula with class div after displaying the table, in its tab-pane or respective record I am saying that I access the array movement with a new index given by a cycle for
(find below the section of nested cycles where it says td ) and there I am painting {% for nest4 in nest3.movimiento %}
The same thing in the cycle <td>{{nest4.nombre}}</td> where I place each value with the index {% for nest5 in nest4.metricas %} , for the case of the array nest5
<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>
Then my concern that I made it quite long because I wanted to specify details in case they were necessary is how I can filter in metricas or records that I get the respective movements of a segment and the respective metrics of a movement and thus be able to give utility to each tab or tab.
I hope I have not been inconvenient with this consultation, and your help or guidance will be greatly appreciated.