Arborescence en JQuery et affichage avec un JSON

Version imprimable

Bonjour,

Je me tourne vers vous suite à un problème que je rencontre lors de l'utilisation de JQuery.

Je dois réaliser une arborescence concernant des personnes c'est à dire:

- J'ai 3 groupes de personnes

- Chaque groupe contient un certain nombres d'individus

- Un individu ne peut appartenir qu'a un seul groupe

J'ai recherché un plugin JQuery et je suis tombé sur cet exemple qui m'a paru très accessible.

Lors de l'utilisation je n'ai pas de problèmes.

J'ai voulu rendre l'utilisation de cet arbre un peu plus dynamique : au clic sur un champ texte j'envoie donc une requete Ajax sur mon serveur. Le serveur me génère un JSON que je réceptionne parfaitement. Je précise que je travaille avec les servlets. Ce JSON contient les nom des individus et est de la forme suivante (dixit Firebug):

Code:

[{"nom":" Benoit"},{"nom":"Patrice"},{"nom":"Mickael"}]

Ci dessous le code de ma requete AJAX:
Code:

1 2 3 4 5 6 7 8 9 10 $.ajax({ url : "ChargerArbre", type : "GET", dataType : "json", success : function(data) { $("#new").append("<ul><li class='parent'><a> TOUS</a><ul>" +"<li class='parent'><a>Groupe_Dev</a><ul>"); $("#new").append("<li><a>"+data[0].nom+"</a></li>");//Ne fonctionne pas<br><br>
Ce code ci-dessus ne fonctionne pas comme il devrait. La construction de mon arbre est complètement foirée ( par foirée j'entends non homogène : les valeurs du JSON sont bien récupérées mais l'affichage est inutilisable --> J’obtiens donc quelque chose d'inexploitable)

Toutefois le code suivant fonctionne bien (mais ne me donne que le nom de la première personne présente dans mon fichier JSON...Donc adieu le dynamisme :(
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $.ajax({ url : "ChargerArbre", type : "GET", dataType : "json", success : function(data) { $("#new").append( "<ul><li class='parent'><a> TOUS </a><ul>" +"<li class='parent'><a>Groupe_Dev</a><ul>" +"<li><a>"+data[0].nom+"</a></li>" ); } });
Quelqu'un aurait t'il une solution à m'apporter ou une explication à me fournir ??

J'ai l'impression que le souci vient du $("#new").append(....)
Si il est en 2 parties (comme dans le premier code que j'ai donné ) la construction de mon arbre est inexploitable

Si en revanche je fais mon $("#new").append(....) d'un seul coup (cf le code que j'ai fourni et qui fonctionne) j'obtiens quelque chose de correct et conforme à mes attentes mais je ne peux plus/sais plus faire de boucle pour construire mon arbre avec mon JSON....

Je tiens à préciser que je travaille avec des servlets et qu'il n'y a aucun plugin JQuery qui entre en conflit ou quoi que ce soit d'autres.

En vous remerciant par avance pour votre attention.

11/04/2013, 10h50
Bovino
Rien que de très normal... :aie:
Dans ton premier exemple, tu insères une balise <ul> dans l'élément #new
Code:

1 2 $("#new").append("<ul><li class='parent'><a> TOUS</a><ul>" +"<li class='parent'><a>Groupe_Dev</a><ul>");
Puis tu insères une balise <li> dans l'élément #new

Code:

$("#new").append("<li><a>"+data[0].nom+"</a></li>");

Sauf que la balise <li>, c'est dans la balise <ul> qu'il faut l'insérer ! :mrgreen:

Bonjour,

Merci pour ta réponse.

J'ai testé selon tes recommandations et le résultat n'est pas probant...
J'ai mis à jour mon code (Pour Info gestionnaire correspond au champ texte sur lequel je clique(et qui envoi la requete ajax) et new est l’arborescence que j'essaie de construire):

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
<script type="text/javascript">
$("#gestionnaire")
	.click(
		function() {
			$.ajax({
				url : "ChargerArbre",
				type : "GET",
				dataType : "json",
				success : function(data) {
					console.log(data);
					/*Génération du début de l'arborescence*/
					$("#new").append("<ul><li class='parent'><a> TOUS </a><ul>" + "<li class='parent'><a>Groupe_Dev</a><ul><li>");
					//+"<a>"+data[0].nom+"</a></li>"); Cette ligne fonctionne
					/*On ajoute les noms renvoyés par le JSON*/
					for ( var x = 0; x < data.length; x++) {
						if (x == 0) {
							nom = "<a>" + data[x].nom + "</a></li>";
							console.log(nom);
							$("#new").append(nom);
						} else {
							nom = "<li><a>"+ data[x].nom+ "</a></li>";
							console.log(nom);
							$("#new").append(nom);
						}
					}
					/*Pour terminer l'arborescence*/
					$("#new").append("</ul></li></ul> </li></ul>");
				}
			});
			/*Code permettant de dérouler notre arborescence (fourni par le concepteur)*/
			$('#new li').each(function() {
				if ($(this).children('ul').length > 0) {
					$(this).addClass('parent');
				}
			});
			$('#new li.parent > a').click(function() {
				$(this).parent().toggleClass('active');
				$(this).parent().children('ul')
				.slideToggle('fast');
			});
		});
</script>

Mais cela ne marche pas...Les nom sont bien récupérés et affichés mais ne font pas partie de l’arborescence...Au lieu d'avoir:
TOUS
|--Groupe DEV
|----Benoit
|----Patrice
|----Mickael

J'ai:
TOUS

Benoit
Patrice
Mickael

Je cherche toujours ou est mon erreur....Si vous avez des solutions a proposer n'hésitez pas !!
Cordialement.

11/04/2013, 13h03
Lorenzo77

salut,

tu devrais montrer le résultat des UL et LI imbriqués, je suis sur qu'il est encore mal foutu !
ton if ne sert a rien dans la boucle for .. ceci doit suffire :

Code:

nom = "<li><a>" + data[x].nom + "</a></li>";

il te faut virer l'ouverture du LI précédent !

Code:

+ "<li class='parent'><a>Groupe_Dev</a><ul><li>");

par

Code:

+ "<li class='parent'><a>Groupe_Dev</a><ul>");

ps : évite les append en séries, c'est + propre et beaucoup + rapide de créer un var qui contient tous l'HTML et de l'ajouter au DOM a la fin !
ps : ton code est illisible, calme toi sur les tabulations :aie:
11/04/2013, 14h26
Bovino
Citation:

J'ai testé selon tes recommandations

Pardon ? 8O
Quand je vois des trucs du style

Code:

$("#new").append("<ul><li class='parent'><a> TOUS </a><ul>" + "<li class='parent'><a>Groupe_Dev</a><ul><li>");

puis
Code:

1 2 nom = "<a>" + data[x].nom + "</a></li>"; $("#new").append(nom);
Je ne crois pas non...

Désolé Bovino j'avais mal compris ce que tu m'avais suggéré....
J'ai trouvé une solution qui fonctionnait pour ce problème...Encore merci pour votre aide à toi et lorenzo.

Je sollicite maintenant vos conseils plus sur une partie algorithmique que sur le code .

Comme je l'ai dit dans mon premier post je dois avoir des groupes de personnes. Chaque groupe contient plusieurs individus mais un individu n'appartient qu'a un seul groupe.

En conséquence mon JSON est légèrement modifié:
Code:

1 2 [{"nom":"Benoit","groupe":"groupedev"},{"nom":"Patrice","groupe":"groupedev"},{"nom":"Francis","groupe":"groupedev"},{"nom":"Mickael","groupe":"groupeconsul"},{"nom":"Christine","groupe":"groupequalite"}]
Je souhaite maintenant réalisé une arborescence avec les groupes et les personnes appartenant à ces groupes.

J'avais pensé à cette solution:
DEBUT
(pour x=0; x< longeur du JSON; x++)

SI c'est mon premier tour de boucle
---> Je crée un nouveau groupe et j'ajoute la personne
SINON
---->Je regarde si mon groupe actuel est différent du groupe précédent
-------->Si oui
------------->Je crée un nouveau groupe et j'ajoute la personne
-------->Si non
--------------> Cela signifie qu'actuellement la personne appartient au même groupe donc je l'ajoute
FIN

Cependant cet algo ne fonctionne pas : je possède des doublons.
Par exemple dans mon premier groupe de personne, je vais trouver les deux groupes suivants comme si ils faisaient parti du premier(alors qu'ils devraient être au même niveau...Je ne sais pas si je suis clair)

J'espère que vous pourrez me venir en aide car je galère vraiment sur cette partie là, et je vous remercie par avance de votre attention.

12/04/2013, 07h49
Bovino

Le plus simple serait surement de modifier la structure de ton JSON à la base.
Tu devrais avoir pour clés de l'objet les différents groupes et pour valeur de ces clés un tableau représentant les personnes de ce groupe.

Bonjour,

J'ai modifié la structure du JSON comme tu me l'as conseillé (ce coup-ci je pense avoir compris;) )

Désormais mon JSON ressemble à ceci :
Code:

1 2 [{"Groupe_Dev":["Benoit","Patrice"],"Groupe_Consult":["Mickael"]}]
Comment puis-je faire pour parcourir cet objet ? Avec une double boucle ?

EDIT: ça fonctionne presque !! J'ai fait une double boucle for de la façon suivante:
Code:

1 2 3 4 5 6 7 8 9 10 11 var obj; //Ajout des personnes for(var i=0;i<data.length; i++){ console.log(data); obj = data[i]; console.log("nom groupe :"+obj); for(var key in obj){ console.log("NOM PERSONNE : "+obj[key]); } }
J'arrive à voir le nom des personnes mais pas celui du groupe...Je continue de chercher mais je ne dis pas non à un petit coup de main ;)

Problème résolu !! La solution pour ceux que ça intéresse était:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
for(var i in data[0]){
obj = data[0][i];
console.log("nom groupe : "+i);
var groupe = "<li><a>"+i+"</a><ul>";
$(".tree li ul").append(groupe);
    for(var key in obj){
        console.log("NOM PERSONNE : "+obj[key]);
        var nom = "<li><a>"+obj[key]+"</a></li>";
	$(".tree li li ul").append(nom);
     }
}