Parcourir les éléments d'une structure et enregistrer des valeurs d'éléments enfants

**pierrot10** · 19/10/2019, 22h08

Bonjour,

Afin d'afficher des résultats sous forme de graphique, je souhaite analyser le code HTML d'un bloque, puis faire appel à du AJAX qui va appeler un script PHP/MySQL et afficher le graph.

LE code a analyser est le suivante

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
34
35
36
37
38
 
<div id="graph" class="row">
	<div class="col-md-12">
<!-- premier bloque -->
		<div class="card" data-family="2">
			<div class="card-header">
				<h4 class="card-title">Températures</h4>
				<p class="card-category"></p>
			</div>
 
			<div class="card-body" data-yaxis0="5" data-yaxis1="0" data-familyname="temperature">
				<div class="chart-container" id="container-temperature">
					<canvas class="canvas" id="temperature"></canvas>
					<div class="chartLoading">
						<img src="img/ajax-loader.gif" />
					</div>	
				</div>
				<p></p>
			</div>
		</div>
<!-- Deucième bloque -->
		<div class="card" data-family="3">
			<div class="card-header">
				<h4 class="card-title">Pression atmosphérique et humidité de l'air</h4>
				<p class="card-category"></p>
			</div>
			<div class="card-body" data-yaxis0="6" data-yaxis1="7" data-familyname="baro">
				<div class="chart-container" id="container-baro">
					<canvas class="canvas" id="baro"></canvas>
					<div class="chartLoading">
						<img src="img/ajax-loader.gif" />
					</div>	
				</div>
				<p></p>
			</div>
		</div>
	</div>
</div>

Évidement, le code de ma page est plus complet.

Ce que je dois faire,

J'aimerais que mon jquery analyse tout de qu'il se trouve dans

Code :

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

<div id="graph" class="row">

Il parcourt tous les <div> enfant, jusqu'à ce qu'il renconrtre

data-family

Il doit enregistrer sa valeur.

puis il continue et quand il rencontre la class

class="card-body"

il doit enregistrer les valeurs de

data-yaxis0
data-yaxis1
data-familyname

Une fois que j'aurais les valeurs de

data-family
data-yaxis0
data-yaxis1
data-familyname

je ferai appel à ma fonction AJAX et le graphique s'affichera en fonction des valeurs extraites de la base de donnée.

Puis Jquery, continue sur le deuxième bloque et affichera le deuxième graphique.
(Il y a plus de 3 bloques)

Je pensais utiliser le each() et le find(), mais a dire vrai, je ne vois pas comment pour parcourir mes bloques comme indiqué plus haut

Code :

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

1
2
3
4
5
6
 
$('#grap').each(function( index ) {
   console.log($( this ).find("card-body").attr("data-yaxis0"));
   console.log($( this ).find("card-body").attr("data-yaxis1"));
   console.log($( this ).find("card-body").attr("data-familyname"));
});

Je vous remercie pour vos lumières

**Toufik83** · 19/10/2019, 23h20

Un simple each avec un tableau et le tour est joué :

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
 
$(document).ready(function(){
   var data=[];//tableau dans lequel on stocke les valeurs
   $('#graph [data-family]')
   .each(function() {
      data
      .push({
          'family':$(this).attr('data-family'),
          'yaxis0':$( this ).find(".card-body").attr("data-yaxis0"),
          'yaxis1':$( this ).find(".card-body").attr("data-yaxis1"),
          'familyName':$( this ).find(".card-body").attr("data-familyname")
      });
 
   });
console.log("data :",data);
});

Après tu peux envoyer tout le tableau via ajax et le parcourir au niveau serveur pour extraire ses données.

**pierrot10** · 20/10/2019, 01h20

Super, merci beaucoup!!!

**pierrot10** · 20/10/2019, 19h14

Je cherche maintenant à cacher ou afficher l’image de chargement

Code HTML :

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

1
2
3
<div class="chartLoading">
						<img src="img/ajax-loader.gif" />
					</div>

Mais il faudrait que je puisse ciblé celle a afficher ou pas. Par exemple si je charge le graphique de la température (du bloque temperatue), je dois afficher celle-là puis la caché

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
34
35
36
37
<div id="graph" class="row">
	<div class="col-md-12">
<!-- premier bloque -->
		<div class="card" data-family="2">
			<div class="card-header">
				<h4 class="card-title">Températures</h4>
				<p class="card-category"></p>
			</div>
 
			<div class="card-body" data-yaxis0="5" data-yaxis1="0" data-familyname="temperature">
				<div class="chart-container" id="container-temperature">
					<canvas class="canvas" id="temperature"></canvas>
					<div class="chartLoading">
						<img src="img/ajax-loader.gif" />
					</div>	
				</div>
				<p></p>
			</div>
		</div>
<!-- Deucième bloque -->
		<div class="card" data-family="3">
			<div class="card-header">
				<h4 class="card-title">Pression atmosphérique et humidité de l'air</h4>
				<p class="card-category"></p>
			</div>
			<div class="card-body" data-yaxis0="6" data-yaxis1="7" data-familyname="baro">
				<div class="chart-container" id="container-baro">
					<canvas class="canvas" id="baro"></canvas>
					<div class="chartLoading">
						<img src="img/ajax-loader.gif" />
					</div>	
				</div>
				<p></p>
			</div>
		</div>
	</div>
</div>

Je pensais donc ciblé comme référence data-familyname, un peu comme cela

Code :

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

1
2
$("#graph").data('familyname="temperature"').children('.chartLoading').show(1);
$("#graph").data('familyname="temperature"').children('.chartLoading').hide(1);

Est-ce que ca peut jouer ceci? ou devrait créer un ID comme cela

Code HTML :

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

1
2
3
4
5
6
7
8
9
<div class="card-body" data-yaxis0="5" data-yaxis1="0" id="temperature" data-familyname="temperature">
				<div class="chart-container" id="container-temperature">
					<canvas class="canvas" id="temperature"></canvas>
					<div class="chartLoading">
						<img src="img/ajax-loader.gif" />
					</div>	
				</div>
				<p></p>
			</div>

Code :

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

1
2
$("#graph #temperature").children('.chartLoading').show(1);
$("#graph #temperature").children('.chartLoading').hide(1);

La deuxième solution me semble plus simple, mais je préfère la première (si elle est juste)

**Toufik83** · 20/10/2019, 19h40

Utiliser l'attribut data-familyname me semble la bonne méthode, mais tu t'es trompé dans le code.

Remplace data par find, ajoute un data- avant familyname et rajoutes des crochets [] autour de data-familyname="temperature":

Code :

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

$("#graph").find('[data-familyname="temperature"]').children('.chartLoading').show(1);

Comme tu peux cibler directement data-familyname et écrire :

Code :

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

$('[data-familyname="temperature"]').children('.chartLoading').show(1);

La même chose pour hide.

Tu vois qu'il y'a pleins de truc à corriger dans le code.
Tu devrais lire un peu la documentation jQuery pour apprendre comment sélectionner des éléments du DOM.

**pierrot10** · 21/10/2019, 00h46

Merci beaucoup,
Ca pas fonctionné tout de suite, mais j'ai réussi à le faire,

Maintenant, j'ai un problème similaire mais en suivant tes propositions ca ne marche pas.

Voici ce que je dois parcourir pour récupérer data-station

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<div class="row" id="fields" data-field="2">
<!-- bloque 1 -->
	<div class="col-md-6">
		<div class="card" data-station="1">
			<div class="card-header">
				<h4 class="card-title">Station 1 (Rangée 8)</h4>
			</div>
 
			<div class="card-body">
				<div class="chart-container" id="moisturePolarContainer-1">
					<canvas class="canvas" id="moisturePolar-1"></canvas>
					<div id="loadingMoisturePolar-1" class="loadingMoisturePolar"><img src="img/ajax-loader.gif" /></div>	
				</div>
			</div>
 
 
			<div class="card-footer">
				<div class="row">
					<div class="col-6 col-sm-4">
						<div class="numbers">
							<p id="temp-1-label-0" class="card-category"></p>
							<h4 id="temp-1-value-0" class="card-title"></h4>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
 
<!-- bloque 2 -->
	<div class="col-md-6">
		<div class="card" data-station="2">
			<div class="card-header">
				<h4 class="card-title">Station 2 (Rangée 9)</h4>
			</div>
 
			<div class="card-body">
				<div class="chart-container" id="moisturePolarContainer-1">
					<canvas class="canvas" id="moisturePolar-2"></canvas>
					<div id="loadingMoisturePolar-1" class="loadingMoisturePolar">
						<img src="img/ajax-loader.gif" />
					</div>	
				</div>
			</div>
 
 
			<div class="card-footer">
				<div class="row">
					<div class="col-6 col-sm-4">
						<div class="numbers">
							<p id="temp-1-label-0" class="card-category"></p>
							<h4 id="temp-1-value-0" class="card-title"></h4>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
 
</div>

Je dois donc parcourir #fields pour avoir les valeurs de data-station.
Dans l'exemple,je dois pouvoir afficher 1 et 2. Mais j0en ai plusieurs (j'ai simplifié le code)

Pour y arrivé j'ai fait comme cela

Code jquery :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
    var graph_dashboard=[]; // je crée une variable
    $('#fields').each(function(){ // je parcours tous les éléments se trouvant sous #fields
 
        console.log("id_station",$( this ).find(".card").attr("data-station")); //je cherche l'attribut data-station de .card
 
        graph_dashboard.push({
            'id_station':$( this ).find(".card").attr("data-station")
        });
 
    })
 
    console.log("graph_dashboard :",graph_dashboard);
    console.log("graph_dashboard len :",graph_dashboard.length);

Le problème est que le premier console.log() n'affcihe que 1, alors qu'il devrait affiché 1,2,3,10 (j'ai 4 bloque en réalité). Donc il ne parcours pas, mais si j'ai un each il devrait le faire, non?

Puis j'aimerais que dans mon array, le résultat m'affiche ceci

Code javascript :

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

1
2
3
4
5
6
 
//console.log("graph_dashboard :",graph_dashboard);
0 => 1
1 => 2
2 => 3
3 => 10

Merci pour vos lumières

**Toufik83** · 21/10/2019, 00h55

Le premier console n'affiche qu'une seule valeur parce que tu n'as qu'un seul #fields.

Il faut cibler les éléments ayant la classe card et pas #fields.

Envoyé par pierrot10

Puis j'aimerais que dans mon array, le résultat m'affiche ceci

Code :

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

1
2
3
4
5
6
 
//console.log("graph_dashboard :",graph_dashboard);
0 => 1
1 => 2
2 => 3
3 => 10

Dans ce cas, tu n'as pas besoin de mettre id_station dans le tableau :

Code :

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

1
2
3
4
5
6
7
8
9
 
    var graph_dashboard=[]; // je crée une variable
    $('#fields .card').each(function(){ // ON parcourt tous les éléments .card se trouvant sous #fields, Maintenant le $(this) vaut à .card 
 
        console.log("id_station",$( this ).attr("data-station")); //je cherche l'attribut data-station de .card
 
        graph_dashboard.push( $( this ).attr("data-station") );
 
    });

**pierrot10** · 21/10/2019, 10h12

Merci beaucoup Toufik83!
Je vais essayé ceci un peu plus tard

Parcourir les éléments d'une structure et enregistrer des valeurs d'éléments enfants

jQuery

Discussions similaires

Partager

Partager