Discussion :

[pierrot10]

Bonjour,

J'ai des containers et dedans des details

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="container card sensor-{{ se.id_sensor}}" data-idsensor="{{ se.id_sensor}}">>
 
                            <img src="{% static 'images/graph.png' %}" class="card-img-top" alt="...">
 
 
                            <div class="container-sensor">
                                <canvas id="sensor-{{ se.id_sensor}}" class="canvas"></canvas>
                            </div>
 
 
                            <div class="card-body">
                                <h5 class="card-title">{{ se.sensor_longname }} [{{ se.sensor_types_id_sensor_type.measure_unit }}]</h5>
                                <p class="card-text">
                                    Station: ({{ se.stations_id_station.id_station }}) {{ se.stations_id_station.station_longname }}</p>
                                <p class="card-text">
                                    Sensors ID: {{ se.id_sensor}}<br>
                                    Type: {{ se.chart_style_id_chart_style.chart_style_name }}<br>
                                    Actif: {{ se.sensor_active }}<br>
                                    Créé le: {{ se.sensor_created }}<br>
                                    Couleur: {{ se.chart_backgroundColor_id_chart_backgroundColor.colors_id_colors.color_name }} (VALUE: {{ se.chart_backgroundColor_id_chart_backgroundColor.colors_id_colors.color_value }})<br>
                                    <details>
                                        <table class="data">
                                            <tr>
                                                <th>Date</th><th>Value</th>
                                            </tr>
                                            {% for d in se.datas %}
                                                <tr data-x="{{ d.measure_created }}" data-y="{{ d.value }}"><td class="data-x"><time>{{ d.measure_created }}</time></td><td class="data-y">{{ d.value }}</td></tr>
                                            {% endfor %}
                                        </table>
                                    </details>
                                </p>
                            </div>
                        </div>

J'arrive looper les container ainsi (note: il y a plusieurs < div class="container" >)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#charts .container').each(function(){})

mais je dois encore looper la balise details ( ou la table avec la class data) pour récupérer les valeurs de data-x et data-y

J'ai essayé ceci sans succès

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#charts .container').each(function(){
 
                console.log("Sensor: ",$(this).attr('data-idsensor'));
                sensors.push({
                    'id_sensor':$(this).attr('data-idsensor')
                });
 
                $currentStation = $(this);
                console.log($currentStation);
 
                $currentStation.find('.data tr').each(function(){
                    console.log("\tx: ",$(this).attr('data-x'));
                    console.log("\ty: ",$(this).attr('data-y'));
                });
 
 
 
            })

à la place de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$currentStation.find('.data tr').each(function(){

j'avais aussi essayé, sans succès

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$currentStation.closest('.data').not(':first').each(function(){})

car, aussi, je ne suis pas intéressé par le premier li du tableau.

Je pense ne pas être très loin, mais comment puis-je faire de manière propre et optimale?

Merci et bonne soirée

[pierrot10]

J'ai réussi à le faire ainsi, qu'en pensez-vous?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$('#charts .container').each(function(){
    console.log("Sensor: ",$(this).attr('data-idsensor'));
    sensor_id_class = 'sensor-' + $(this).attr('data-idsensor');
 
    $('.' + sensor_id_class + ' .data').each(function(){
        console.log("\tx: ",$(this).attr('data-x'));
        console.log("\ty: ",$(this).attr('data-y'));
    });
});

Ca marche, mais est-ce bien?

[mathieu]

pourquoi vous générez du code html pour ensuite en extraire les données ? ça ne serait pas plus efficace de générer directement une variable javascript qui contient les données ?

[pierrot10]

Oui probablement.
Je travaille avec Django et je commence avec ce framework.
Pour le moment, je fais comme je peux, mais il y a sûrement un moyen plus optimale de sauver les données dans des data- et les récupérer en js.
Je suis d'accord. J'aiméliorerai ceci au fur et à mesure que je progresse avec Django. Je vais étudier les REST Api qui va surement faire les choses mieux

[mathieu]

si vous avez les données dans une variable python, vous pouvez générer une variable javascript avec les méthodes indiquées sur cette page :
https://docs.python.org/fr/3/library/json.html