Générer une liste (menu) depuis un JSON

Version imprimable

Bonjour,

Je souhaiterais compléter un menu UL LI qui à déjà un champs recherche en dur dans un LI.

Je voudrais pouvoir compléter ce menu en récupérant menu stocker dans un JSON sous cette forme :
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 { "menu" : [{ "icon" : "fa fa-home", "name" : "accueil", "url" : "/index1.dws", "classe" : "ajaxify" },{ "icon" : "fa fa-user", "name" : "accueil2", "url" : "/index2.dws", "classe" : "ajaxify" },{ "icon" : "fa fa-user", "name" : "Sous Accueil", "url" : "#", "classe" : "" "sousMenu" : [{ "name" : "Sous accueil 1", "url" : "/sousA1.dws", "classe" : "ajaxify" },{ "name" : "Sous accueil 2", "url" : "/sousA2.dws", "classe" : "ajaxify" }] }] }
Je voudrais compléter sous cette forme :
Code:

1 2 3 4 5 6 7 8 <li></li> <li></li> <li> <ul> <li></li> <li></li> </ul> </li>
Je voudrais utiliser une méthode $.get. Parcourir le data et faire l'ajout grâce à un append.
Débutant en Jquery je ne vois pas très bien comment faire et surtout réussir à ce que ça soit générique. :ptdr:

Quelqu'un pour débloquer ma situation ? :calim2:

25/02/2014, 16h26
SpaceFrog

tu utilises jquery ?
=> $.each() te permettra de parcourir le json et d'appender les li...
25/02/2014, 17h03
narvik
Oui c'est bien Jquery que j'utilises mon plus gros problème n'est pas de parcourir les données mais bel et bien l'append.

Si j'avais juste des <li></li> les uns à la suite des autres ça irait mais là j'ai des sous menu et c'est ça qui me pose souci.

Comme je disais sous cette forme :
Code:

1 2 3 4 5 6 7 8 <li></li> <li><a></a></li> <li><a></a> <ul> <li><a></a></li> <li><a></a></li> </ul> </li>
de plus chaque élément (comme on peut le voir dans mon JSON plus haut) à des paramètres (classe, texte entre balises, icone)

Bonsoir

Exemple :

Code:

1
2
3
<ul id="monMenuExistant">
    <li><a href="#">Menu 1</a></li>
</ul>

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
var dataset = {
    "menu" : [
        { 
            "icon" : "fa fa-home",
            "name" : "accueil",
            "url" : "/index1.dws",
            "classe" : "ajaxify"
        },
        { 
            "icon" : "fa fa-user",
            "name" : "accueil2",
            "url" : "/index2.dws",
            "classe" : "ajaxify"
        },
        { 
            "icon" : "fa fa-user",
            "name" : "Sous Accueil",
            "url" : "#",
            "classe" : "rien", // pas "" mais une nom quelconque
            "sousMenu" : [
                { 
                    "name" : "Sous accueil 1",
                    "url" : "/sousA1.dws",
                    "classe" : "ajaxify"
                },
                {
                    "name" : "Sous accueil 2",
                    "url" : "/sousA2.dws",
                    "classe" : "ajaxify"
                }
            ]  
        }
    ]
};
 
/*
var jqXHR = $.getJSON( "fichier.php" );
 
jqXHR.done( function( data, textStatus, jqXHR ){
    // succès de la transaction, on doit traiter le contenu de data
    console.log( data, textStatus, jqXHR );
    
    // data = dataset ci-dessus
    // ci-dessous pour l'exploitation de data
});
 
jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
    // échec de la transaction, gérer la catastrophe
    console.log( jqXHR, textStatus, errorThrown );
                            
});
 
jqXHR.always( function( jqXHR, textStatus ){
    // la transaction est terminée
    console.log( jqXHR, textStatus );
});
*/
 
var jObjMenu = $( "#monMenuExistant" ),
    jObjModel = $( "<li/>", {
        "html" : '<a class="maClasse" href="#">Menu</a>'
    }),
    jObjLi = null,
    jObjA = null,
    jObjSLi = null,
    jObjSA = null;
 
$.each( dataset[ "menu" ], function( i, item ){
    jObjLi = jObjModel.clone();
    jObjA = jObjLi.find( "a" );
 
    jObjA.text( item[ "name" ] );
    jObjA.attr( "class", item[ "classe" ] );
    jObjA.attr( "href", item[ "url" ] );
 
    if ( item[ "sousMenu" ] ){            
        jObjLi.append( '<ul></ul>' );
 
        $.each( item[ "sousMenu" ], function( j, jtem ){
            jObjSLi = jObjModel.clone(),
            jObjSA = jObjSLi.find( "a" );
 
            jObjSA.text( jtem[ "name" ] );
            jObjSA.attr( "class", jtem[ "classe" ] );
            jObjSA.attr( "href", jtem[ "url" ] );
 
            jObjLi.find( "ul" ).append( jObjSLi );
        });
    }
 
    jObjMenu.append( jObjLi );
});
 
/*
 * Résultat dans Chrome :
 * <ul id="monMenuExistant">
        <li><a href="#">Menu 1</a></li>
        <li><a class="ajaxify" href="/index1.dws">accueil</a></li>
        <li><a class="ajaxify" href="/index2.dws">accueil2</a></li>
        <li><a class="rien" href="#">Sous Accueil</a>
            <ul>
                <li><a class="ajaxify" href="/sousA1.dws">Sous accueil 1</a></li>
                <li><a class="ajaxify" href="/sousA2.dws">Sous accueil 2</a></li>
            </ul>
        </li>
    </ul>
 */