Discussion :

[CinePhil]

Bonjour,

Je cherche le meilleur moyen d'actualiser automatiquement un petit classement "Top 5".

Ce classement est un tableau HTML affiché bien sûr dans une div.
Il y a en fait plusieurs classements (actuellement potentiellement 5) qui doivent s'afficher successivement toutes les X secondes.

J'ai construit une requête relativement complexe qui permet d'extraire tous les TOP 5 d'un coup, soit actuellement 25 lignes de 3 colonnes (+ 1 pour le nom du top 5) au maximum.

Mon idée est de donner à Javascript ce tableau classé de 25 lignes et de développer une fonction qui changerait le classement affiché périodiquement mais sans recharger les données depuis le serveur puisque toutes les données nécessaires sont extraites en une seule fois.

J'imagine qu'il faut encoder le tableau en JSon ?

Et ensuite ? Dois-je construire le tableau HTML en Javascript avec son contenu variable ?

Si par hasard vous connaissez un outil tout fait qui répond à ce besoin, je suis preneur.

[CinePhil]

J'ai déjà des petits soucis avec la lecture du JSON !

Le tableau de mes top 5 encodé en JSON donne cette chaîne :

{"1":{"2":{"pseudo":"azer","nb_rep":"12","best_time":"16483"},"1":{"pseudo":"jdupont","nb_rep":"12","best_time":"22001"},"3":{"pseudo":"test","nb_rep":"2","best_time":"24501"}}}

Et pour tester, j'ai créé une petite fonction Javascript :

Code :

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

1
2
3
4
function majTop5(jsonTop5)
{
	alert(jsonTop5.1.2.pseudo);
}

Firebug donne cette erreur :

missing ) after argument list

Pourtant la parenthèse fermante est bien là non ?

[Rachel]

bonsoir .
Déjà, petit problème dans la déclaration de ton objet, tu utilises des nombres ou des strings comme nom de variable. tes noms doivent être sans les doubles quotes, ce qui du coup t'oblige à utiliser des noms, et pas des nombres .

Code :

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

1
2
3
4
5
6
7
8
var json = {
a:{
	a:{pseudo:"azer",nb_rep:12,best_time:16483,position:1},
	b:{pseudo:"jdupont",nb_rep:12,best_time:22001,position:2},
	c:{pseudo:"test",nb_rep:2,best_time:24501,position:3}
    }
//j'ai rajouté "position" pour que tu puisses faire ton classement numérique :D
} ;

et comme tu souhaites mettre à jour ce tableau de classement, je te conseille de ne pas mettre tes nombres entre guillemets, ce qui te permet de comparer par les nombres . Tu n'auras plus ensuite qu'a changer la valeur de "position" dans chaque objet .

[CinePhil]

Merci pour ta réponse.
J'ai changé la génération du tableau et j'obtiens maintenant ceci en Json :

{"lot_1":{"joueur_2":{"pseudo":"azer","nb_rep":"12","best_time":"16483"},"joueur_1":{"pseudo":"jdupont","nb_rep":"12","best_time":"22001"},"joueur_3":{"pseudo":"test","nb_rep":"2","best_time":"24501"}}}

Ce qui fait qu'avec cette fonction test :

Code :

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

1
2
3
4
function majTop5(jsonTop5)
{
	alert(jsonTop5.lot_1.joueur_2.pseudo);
}

J'ai bien le premier pseudo en affichage.

Je cherche maintenant la meilleure méthode pour parcourir ce tableau Json en Javascript, à la manière d'un foreach de php.

EDIT :
J'ai essayé ceci mais rien ne s'affiche :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function majTop5(jsonTop5)
{
	for (var i=0; i<jsonTop5.length; i++)
	{
		var lot = jsonTop5[i];
 
		for (var j=0; j<lot.length; j++)
		{
			var joueur = lot[j];
			alert(joueur.pseudo);
		}
	}
}

[NoSmoking]

Bonsoir,
tu peux utiliser for...in pour la boucle
exemple :

Code :

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

1
2
3
4
5
6
7
8
9
for( var i in data){
  document.write( i /*, ' : ', data[i]*/);
  for( var j in data[i]){
    document.write( '--', j , ' : ', /*+data[i][j], */ '<br>');
    for( var k in data[i][j]){
      document.write( '----', k, ' : ', data[i][j][k], '<br>');
    }
  }
}

avec data indenté

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
19
20
var data =
{
  "lot_1": {
    "joueur_2": {
      "pseudo": "azer",
      "nb_rep": "12",
      "best_time": "16483"
    },
    "joueur_1": {
      "pseudo": "jdupont",
      "nb_rep": "12",
      "best_time": "22001"
    },
    "joueur_3": {
      "pseudo": "test",
      "nb_rep": "2",
      "best_time": "24501"
    }
  }
};

PS : le document.write est la pour montrer le résultat

[CinePhil]

Oui effectivement j'y suis arrivé avec for in.

Il me reste à faire la fonction qui génère le HTML du tableau du top 5 et la fonction qui va mettre à jour ce top 5 en bouclant sur chaque top 5 du tableau (pour le moment, il n'y en a qu'un mais il y en aura plusieurs).

Encore merci pour ton aide.

EDIT :

Pour le moment, j'en suis à cette fonction dans mon fichier Javascript :

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
19
20
21
22
23
24
function majTop5(jsonTop5, lot_id, type_lot)
{
	var lot = jsonTop5.lot_id;
	var rank = 0;
 
	var contenuHTML = '<table class="table_top_membres">\n';
 
	for (var j in lot)
	{
		var joueur = lot[j];
		rank ++;
 
		contenuHTML += '<tr class="tr_membre_top">\n';
		contenuHTML += 	'<td class="td_top_pseudo">' + rank + joueur.pseudo + '</td>\n';
		contenuHTML += 	'<td class="td_top_result">' + joueur.best_time + '</td>\n';
		contenuHTML += 	'<td class="td_top_result">' + joueur.nb_rep + '</td>\n';
		contenuHTML += '</tr>\n';
	}
 
	contenuHTML += '</table>\n';
 
	document.getElementById("top_type_lot").innerHTML = type_lot;
	document.getElementById("top_membres").innerHTML = contenuHTML;
}

Et dans ma vue phtml, j'ai inséré ce bout de Javascript pour au moins tester :

Code :

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
				window.onload=function()
				{
					setInterval('majTop5(<?php echo $jsonTop5.", \'lot_1\', \'un type lot\'"; ?>)',10000);
				}; 
			</script>
			<div id="top_membres">
			</div>

Lorsque j'avais encore des erreurs de syntaxe, je constatais que l'erreur ne s'affichait dans Firebug qu'au bout de 10 secondes.
Maintenant, je n'ai plus d'erreur mais le top 5 ne s'affiche pas.

EDIT 2 :
Le problème ci-dessus semble dû au fait que lot_id n'est pas interprété comme une variable dans l'expression :

Code :

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

var lot = jsonTop5.lot_id;

En remplaçant lot_id par sa valeur (une seule pour le moment), le top5 s'affiche.
J'ai essayé, rapidement vu l'heure tardive, cette syntaxe pour avoir la variable mais ça ne fonctionne pas :

Code :

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

var lot = jsonTop5 + '.' + lot_id;