IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2013
    Messages : 10
    Par défaut Générer une liste (menu) depuis un JSON
    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 : 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
    {
    "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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

    Quelqu'un pour débloquer ma situation ?

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    tu utilises jquery ?
    => $.each() te permettra de parcourir le json et d'appender les li...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2013
    Messages : 10
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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)

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Exemple :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <ul id="monMenuExistant">
        <li><a href="#">Menu 1</a></li>
    </ul>

    Code JS : 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
    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>
     */

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. [XSLT] Générer une liste déroulante à partir d'un fichier xml ?
    Par chipster45 dans le forum XML/XSL et SOAP
    Réponses: 6
    Dernier message: 30/03/2007, 09h59
  2. [Débutant] Générer une liste de 1 à m
    Par Treuze dans le forum Prolog
    Réponses: 12
    Dernier message: 28/03/2007, 17h52
  3. Générer une page html depuis un fichier texte
    Par Thordax dans le forum Entrée/Sortie
    Réponses: 1
    Dernier message: 11/04/2006, 08h29
  4. Générer une requête SQL depuis un model physique
    Par Ryan Sheckler dans le forum Requêtes
    Réponses: 4
    Dernier message: 01/12/2005, 12h11
  5. Générer une liste
    Par pfredin dans le forum Langage SQL
    Réponses: 6
    Dernier message: 02/04/2003, 15h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo