Renseignez les données de fichier JSON dans Array, puis transférez-les dans le plug-in mmenu

J’essaie de lire un fichier JSON (menu.json) dans un tableau (myList) afin d’exécuter une fonction (PopulateRecords) qui remplira mon plugin de menu jQuery avec des lignes HTML. Cela me permettrait idéalement de modifier dynamicment les options de mon menu en ne mettant à jour que le fichier JSON ultérieurement.

Mon fichier JSON est menu.json:

{"pavers": [ {"display": "Brukstone", "url": "brukstone.html"}, {"display": "Bulovar", "url": "pavers/bulovar.html"}, {"display": "Cobble", "url": "pavers/cobble.html"}, {"display": "Cracovia", "url": "pavers/cracovia.html"}, {"display": "Filtrapave", "url": "pavers/filtrapave.html"}, {"display": "Holland", "url": "pavers/holland.html"}, {"display": "Old Munich", "url": "pavers/oldmunich.html"}, {"display": "Strassen Classic", "url": "pavers/strassen.html"}, {"display": "Strassen Bavaria (Tumbled)", "url": "pavers/strassenbavaria.html"}, {"display": "Strassen Barvaria II (Non-tumbled)", "url": "pavers/strassenbavariaii.html"}, {"display": "Vavel Stone (Tumbled)", "url": "pavers/vavel.html"}, {"display": "Vavel Stone II (Non-tumbled)", "url": "pavers/vavelii.html"} ]} 

Mon HTML est

                   $(function() { $('nav#menu').mmenu(); });      // CALL JSON DATA var myList; $.getJSON('menu.json') .done(function (data) { myList = data; }); // POPULATE MENU ITEMS FROM ARRAY PopulateRecords("01",myList);    

La fonction PopulateRecords appelée se trouve dans un fichier functions.js distinct qui était attaché dans la tête html.

• jQuery position div au milieu de la page
• Faire en sorte que Nav Div apparaisse lors du défilement
• Comment définir la propriété readonly sur false sur plusieurs zones de texte avec la même classe?
• Non autorisé à naviguer dans le cadre supérieur de l’URL de données: JsPDF
• Effet de zoom uniquement Zooms Image originale Pas nouvelle image de la vignette

Le javascript de la fonction est:

 function PopulateRecords(id, arr) { var out = "
"; var i; for(i = 0; i<arr.length; i++) { out += '
' + arr[i].display + '
'; } out += "
"; document.getElementById("id"+id).innerHTML = out; } 

Fonctionnement: La fonction PopulateRecords (appelée dans la dans HTML) doit recevoir le numéro d’identification de l’élément div qui est un espace réservé (id01) dans le code HTML du menu de navigation. Un tableau est également passé à partir du fichier menu.json (également appelé dans la dans HTML). Il injecte ensuite le code HTML qui suit le format approprié requirejs par jQuery mmenu (liste des éléments et href).

Remarque: j’ai testé la fonction PopulateRecords avec un tableau javascript déclaré. Ainsi, la fonction fonctionne correctement tant qu’une valeur est atsortingbuée à “url” et à “display”.

Naturellement , comme je ne connais pas bien le concept, cela me porte à croire que le problème réside dans mon incapacité à parsingr le fichier JSON. Après avoir plongé ma tête dans ce problème, je me tourne vers la communauté des débordements de stack pour obtenir de l’aide.

EDIT: Notes de débogage en cours :

1) Ci-dessous, l’appel JSON mis à jour. En déplaçant l’appel PopulateRecords dans “.done”, le résultat arrête l’erreur “myList not defin error”, mais ne remplit toujours pas la table ( img1 ci-dessous).

 var myList; $.getJSON('menu.json') .done(function (data) { myList = data; PopulateRecords("01",myList); console.log(myList.pavers); console.log(myList); console.log(data); }); 

img1

2) J’ai également ajouté plusieurs appels console.log au fichier «.done» pour le débogage. Le journal ne renvoie rien lorsque la page est appelée.

3) Une fois la page appelée, utilisez les mêmes appels sur la ligne de console pour la page avec les résultats suivants ( img2 ci-dessous). img2

• Le bouton HTML ne clique pas même lorsque la focalisation est activée et les règles CSS entrent en jeu
• jQuery datepicker – met en surbrillance la date sélectionnée dans Datepicker dans un calendrier
• le défilement infini s’arrête si je fais un zoom sur mon navigateur
• Fractionnement HTML avant chaque balise d’image
• Html Lire plus de code

 var myList; $.getJSON('menu.json') .done(function (data) { myList = data; PopulateRecords("01",myList); console.log(myList.pavers); console.log(myList); console.log(data); }); 

 $(document).ready(function(){ ... }); 

 $(document).ready(function(){ var myList; $.getJSON('menu.json') .done(function (data) { myList = data; PopulateRecords("01",myList); $('nav#menu').mmenu(); console.log(myList.pavers); console.log(myList); console.log(data); }); }) 

 { "name": "aMenu", "options": [ { "name": "option 1", "url": "#" }, { "name": "option 2", "url": "#" }, { "name": "option 3", "url": "#" }, { "name": "option 4", "url": "#" } ] }