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

Version imprimable

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:

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

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

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

Citation:

data-family

Il doit enregistrer sa valeur.

puis il continue et quand il rencontre la class

Citation:

class="card-body"

il doit enregistrer les valeurs de

Citation:

data-yaxis0
data-yaxis1
data-familyname

Une fois que j'aurais les valeurs de

Citation:

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:

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

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

Code:

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.

20/10/2019, 01h20
pierrot10

Super, merci beaucoup!!!

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

Code:

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:

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:

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:

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:

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)

20/10/2019, 19h40
Toufik83

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:

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

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

Code:

$('[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.

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:

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:

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:

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

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.
Citation:
Envoyé par pierrot10
Puis j'aimerais que dans mon array, le résultat m'affiche ceci
Code:

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:

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") ); });

21/10/2019, 10h12
pierrot10

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