Créer une arborescence html depuis un objet javascript

**oooopppp** · 27/03/2018, 18h00

Bonjour à tous !

Je n'ai pas vraiment l'habitude de demander de l'aide, d'habitude je cherche des pistes sur gogol mais là
j'ai pas vraiment trouvé de réponses adéquates.

Donc, ce que je voudrais faire c'est créer une vue d'arborescence à partir d'un objet qui contient des tableau d'objets
qui contiennent etc ...

j'ai donc un objet qui contient des tableaux d'objets (créer par JSon) qui se nomme cat_gen :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// structure d'exemple
cat_gen :[{titre: 'titre cat 1',
                   sub:[{ titre: 'titre 1 sous-cat 1}],
                             [{titre: 'titre 2 sous-cat 1',
                                sub:[{ titre: 'titre 1 sous-sous-cat 1'}]
                             }],
             }],
             [{titre: 'titre cat 2',
                   sub:[{ titre: 'titre 1 sous-cat 2'}],
                             [{titre: 'titre 2 sous-cat 2',
                                sub:[{ titre: 'titre 1 sous-sous-cat 2'}]
                             }],
              }]

Cet objet peut contenir des sous-catégories qui contiennent elles-même des sous-catégories etc ...

La structure est toujours la même -> titre et sub[] (si il y a un tableau de sous-cat (sub) sinon il n'y a que le titre.

Ce que je voudrais faire c'est créer des listes imbriquées, faire une arborescence quoi ...
Après le but c'est créer une arborescence comme avec des plug-in comme bootstrap-treeview (c'est ce que j'utilise déjà)
mais je ne suis pas satifait du résultat j'aimerais pouvoir gérer le retrait des sous-catégories, y incorporer des datas additionnels
(ils sont déjà présent dans l'objet originel) et créer une vue avec des images pour créer les lignes de correspondances et de retrait,
je sais pas si c'est clair, en gros une ligne verticale qui se termine par une flèche, bref une vue claire de l'arbo.

Mon test :

une fonction récusive

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
25
26
27
28
29
30
31
32
33
34
35
 
/*
 * Funct rappelSub
 * @param obj. sub parent
 */
rappelSub: function(obj, id) {
 
		// ajouter un '<ul>' tag
		$('li#'+id+'').append('<ul>');
 
		// parcourir obj. 'sub'
		obj.forEach(function(SUB, k){
 
			// ajouter un '<li>' tag + titre
			$('li#'+id+' ul').append('<li data-k="'+k+'" id='+SUB.nat+SUB.id+'>' + SUB.titre);
 
			// si l'obj. 'sub' contient lui aussi des sous-objets
			if(SUB.sub){
 
 
				//on appelle la fonction rappelSub qui est récursive,
				// on lui passe en paramètre la clé du parent et l'id du Sub
				$.loi.rappelSub(SUB.sub, SUB.nat+SUB.id);
 
		       }
 
		      // fermer '</li>' tag
		      $('li#'+id+' ul').append('</li>');
 
		}); // fin boucle
 
		// fermer un '</ul>' tag
		$('li#'+id+'').append('</ul>');
 
}

Et un script qui parcours l'objet cat_gen :

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
 
$.m.group.work.cat_gen.forEach(function(item, k){
 
	// insérer en premier <li> début de liste
        $('#test').append('<ul><li id="cat'+item.id+'">' + item.titre);
 
	// si l'item contient un sous-objet 'sub'
	if(item.sub){
 
		//on appelle la fonction rappelSub qui est récursive,
		// on lui passe en paramètre la clé du parent et l'id du Sub
		$.loi.rappelSub(item.sub, 'cat'+item.id+'');				
	}
 
	// inérer en dernier le </li> fin de liste
        $('#test').append('</li></ul>');
 
});

Pour l'instant je liste beaucoup trop de choses, je pense que je dois compter chaque objet sub et faire des boucles en conséquence ...

Ca fonctionne bien dans le sens où je n'ai que trois niveaux, mais quand j'en ajoute un quatrième (il peut y en avoir une infinité),
ça me rappelle toutes les autres cat/sous-cat des objets parcourus précédemment ...

Le but final étant de créer une arborescence qui affiche les premiers parents (les catégories générales) et qui affiche
les sous-cat. collapsées (par boostraps par ex.) lorsqu'on clique dessus, au final avoir un icône (font-awsome) selon les datas,
un titre avec onclick="" pour aller chercher la sous-cat et une étiquette (tag) selon datas ...

Pourquoi pas créer un véritable plug-in jQuery à la fin et le partager avec tous.

Pour être plus clair voici un exemple réalisé avec bootstrap-treeview.js mais je ne suis pas satisfait du résultat,
il n'y a pas de lignes verticales et mes derniers items ne dervais pas s'afficher sous forme de lien ...
j'ai modifié bootstrap-treeview.js pour arriver à ce résultat mais je comprend mal leur logique (leur code) afin de personnaliser entièrement le schmilblik.

Vues en prod. :

Nom : arbo0.JPG
Affichages : 1585
Taille : 22,0 Ko

Nom : arbo0.JPG
Affichages : 1585
Taille : 22,0 Ko

Nom : arbo1.JPG
Affichages : 1437
Taille : 14,7 Ko

Nom : arbo2.JPG
Affichages : 1526
Taille : 31,9 Ko

Merci de votre aide,
cordialement,
Raf

**danielhagnoul** · 27/03/2018, 21h53

Vous dites que vos datas sont un Object qui a été créé par JSON, cela me semble impossible, car sa structure est incorrecte.

Structure correcte pour un JSON :

Code JavaScript :

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
const datas = {
  "cat_gen" : 
  [
    {
      "titre": "titre cat 1",
      "sub" : 
      [
        { 
          "titre" : "titre 1 sous-cat 1"
        },
        {
          "titre" : "titre 2 sous-cat 1",
          "sub" : 
          [
            { 
              "titre": "titre 1 sous-sous-cat 1"
            }
          ]
        }
      ]
    },
    {
      "titre" : "titre cat 2",
      "sub" : 
      [
        { 
          "titre" : "titre 1 sous-cat 2"
        },
        {
          "titre" : "titre 2 sous-cat 2",
          "sub" : 
          [
            { 
              "titre" : 'titre 1 sous-sous-cat 2'
            }
          ]
        }
      ]
    }
  ]
};

Pour le reste, la discussion devrait être transférée dans le forum jQuery.

**mathieu** · 27/03/2018, 22h15

l'exemple "cat_gen" n'est pas un objet valide donc je suppose que c'est juste un 1er jet et je l'ai remis en forme pour obtenir cela :

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
25
26
27
28
29
30
31
    var cat_gen = [
        {
            "titre" : 'titre cat 1',
            "sub" : [{
                "titre" : 'titre 1 sous-cat 1',
                "sub" : [{
                    "titre" : 'titre 2 sous-cat 1 sous-sous-cat 1',
                    "sub" : [
                        {"titre" : 'titre 1 SC1 sous-sous-sous-sous-cat 1'},
                    ],
                },],
            },],
        },
        {
            "titre" : 'titre cat 2',
            "sub" : [
                {
                    "titre" : 'titre sous-cat 2-A',
                    "sub" : [{
                        "titre" : 'titre sous-cat 2 sous-sous-cat 2',
                        "sub" : [
                            {"titre" : 'titre SC2 sous-sous-sous-sous-cat 2'},
                        ],
                    },],
                },
                {
                    "titre" : 'titre sous-cat 2-B',
                },
            ],
        },
    ];

ensuite je vous conseille d'utiliser la création d'objet HTML de jQuery au lieu de construire une chaine de caractères. cela permet d'utiliser une seule fonction récursive pour tout construire.
donc tout ça mis ensemble, vous pouvez essayer le code suivant :

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
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
62
63
64
65
66
67
68
69
70
71
72
 
    var cat_gen = [
        {
            "titre" : 'titre cat 1',
            "sub" : [{
                "titre" : 'titre 1 sous-cat 1',
                "sub" : [{
                    "titre" : 'titre 2 sous-cat 1 sous-sous-cat 1',
                    "sub" : [
                        {"titre" : 'titre 1 SC1 sous-sous-sous-sous-cat 1'},
                    ],
                },],
            },],
        },
        {
            "titre" : 'titre cat 2',
            "sub" : [
                {
                    "titre" : 'titre sous-cat 2-A',
                    "sub" : [{
                        "titre" : 'titre sous-cat 2 sous-sous-cat 2',
                        "sub" : [
                            {"titre" : 'titre SC2 sous-sous-sous-sous-cat 2'},
                        ],
                    },],
                },
                {
                    "titre" : 'titre sous-cat 2-B',
                },
            ],
        },
    ];
 
 
    console.log(cat_gen);
 
 
    $("body").append(generationHTML(cat_gen));
 
 
 
    function generationHTML(listeCategories) {
 
 
        var resultat = $("<ul/>");
 
 
        $(listeCategories).each(function (index, element) {
 
            var ligne = $("<li/>");
 
            // ajout du titre
            ligne.append(
                $("<span/>")
                    .text(element["titre"])
            );
 
            // ajout des sous éléments
            if ("undefined" != typeof element["sub"]) {
                ligne.append(
                    generationHTML(element["sub"])
                );
            }
 
            resultat.append(ligne);
 
        });
 
 
        return resultat;
 
    }

**oooopppp** · 28/03/2018, 15h31

Salut, merci pour vos remarques,
j'ai simplement essayé de reconstruire ce qui apparaît dans la console,
l'objet est bien construit mon code de l'objet était donné à titre d'exemple,
un copié_collé de la console aurait eu une sortie ... déplorable !
Alors le principe est que l'objet cat_gen contient des objets imbriqués qui ont tous la même
configuration : Un titre et un objet "sub" qui contient d'autres objet construits avec la même architecture,
l'objet cat_gen semble bien construit car bootstraps-treeview.js l'interprète correctement, je construit l'objet
avec une fonction récursive en php, je fais une imbrication de tableaux dans des tableaux (titre, sub[] -> titre, sub[], etc ..)
Tout ça est renvoyé par JSon_rpc, c'est pourquoi j'ai argumenté en disant que l'objet est un json à l'origine ...

Je pense que quelque part il faut que je garde en mémoire un nombre qui indique la profondeur,
pour pouvoir implanter les retraits ainsi que les parent d'origine, pour refaire partir la boucle à 0,
sur le prochain parent, compter le length de chaque sub[] afin de faire une boucle avec un compteur précis,
ça se décante un peut mais je crois que j'atteins mes limites intellectuelles (qui sont j'en ai conscience pas très grandes !)

une capture de là où j'en suis :

Nom : arbo.JPG
Affichages : 1507
Taille : 74,8 Ko

Nom : arbo.JPG
Affichages : 1507
Taille : 74,8 Ko

je vous conseille d'utiliser la création d'objet HTML de jQuery

J'ai pris cette option en premier mais la fonction html() de jQuery remplace les listes au lieu de les ajouter à la fin dans chaque balise <ul></ul>

Vous pouvez ne pas me vouvoyer, je ne suis qu'une bactérie sur un cailloux humide perdue dans l'espace ...
Merci de votre intérêt,
je ne sais comment transférer mon topic sur le forum jQuery,
cordialement,
Raf

**mathieu** · 28/03/2018, 18h56

nous ne sommes pas qu'un bactérie mais un mélange de plusieurs milliards de bactéries et autres organismes a une ou plusieurs cellules. pour la partie "perdu dans l'espace", je ne peux que confirmer qu'il y a beaucoup de vide autour de nous.

lors de la construction de l'arborescence, il est possible d'utiliser la fonction récursive pour calculer le niveau.
cela peut se faire comme ça par exemple, en gardant la structure de données de mon 1er message.

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    $("body").append(generationHTML2(cat_gen, 1)); // 1 est le niveau des éléments racines
 
 
 
    function generationHTML2(listeCategories, niveau) {
 
 
        var resultat = $("<ul/>");
 
 
        $(listeCategories).each(function (index, element) {
 
            var ligne = $("<li/>");
 
            // ajout du titre
            ligne.append(
                $("<span/>")
                    .text("niveau " + niveau)
                    .css("font-weight", "bold")
                    .css("padding-right", "0.5em")
            );
            ligne.append(
                $("<span/>")
                    .text(element["titre"])
            );
 
            // ajout des sous éléments
            if ("undefined" != typeof element["sub"]) {
                ligne.append(
                    generationHTML2(element["sub"], niveau + 1)
                );
            }
 
            resultat.append(ligne);
 
        });
 
 
        return resultat;
 
    }

en utilisant la méthode "html", c'est de nouveau une construction sous forme de chaine de caractères.
alors qu'en manipulant des objets, il y a beaucoup plus de libertées de placement :
http://api.jquery.com/category/manip...ertion-inside/
http://api.jquery.com/category/manip...rtion-outside/
http://api.jquery.com/category/manip...m-replacement/

**oooopppp** · 28/03/2018, 21h22

Salut, mathieu,

forcément, je n'avais pas vu la suite de ton message précédent,
je n'avais vu que le JSon ...

Alors je viens de tester sur une page annexe ton script qui fonctionne à merveille,
je vois que j'ai beaucoup à apprendre encore en comparant mon code et le tiens (je suis autodidacte),
j'étais parti pour en rajouter une sacré tartine, mon principe étant que quand ça fonctionne, ça fonctionne ...
(en digne héritier du PHP!)

Je vais essayer de le tester en dur sur le site sûrement cette nuit,
je ferais un feed-back.

Merci beaucoup de votre intérêt et de votre aide !

-> Feed-back :

Nom : votemo cap.JPG
Affichages : 1374
Taille : 20,0 Ko

Nom : votemo cap.JPG
Affichages : 1374
Taille : 20,0 Ko

Rendu HTML impeccable !,
je vais essayer d'implanter tous les petits détails que je désire,
en premier n'afficher que les catégories principales,binder un click sur la balise <li> pour développer les enfants au fur et à mesure,
placer mes liens et leurs attributs onclick ...
Gérer le retrait et les lignes directrices avec des images (existe t'il des ascii qui conviendraient ? - question pour moi-même)
Aurait-tu une idée afin de gérer le retrait (oui je sais, j'exagère!) ?

-> êtes-vous intéressé par un feed-back au fur et à mesure que j'avance ?

Encore un grand merci

, j'ai déjà une solution en prod. qui est correcte ... je sais qu'il ne faut pas essayer à
chaque fois de réinventer la roue mais la solution en place ne me convient pas tout à fait ...

Créer une arborescence html depuis un objet javascript

jQuery

Vue hybride

Discussions similaires

Partager

Partager