Arrays multidimensionnels et getJSON de jQuery

Je suis soumis à une requête getJSON à un contrôleur dans ma demande, ce contrôleur retourne JSON valide avec 2 "applications". Je sais cela pour un fait comme si je déplacer l'instruction d'alerte dans les fonctions de jQuery chaque fonction, il me donnera le résultat attendu.

Je tente de stocker ces données dans un tableau multidimensionnel pour ensuite être utilisé avec ExtJS 'Menu Control.

Code:

Ext.onReady(function() { var applicationList = []; jQuery.getJSON('index.php/applications', function(data) { jQuery.each(data.applications, function (i, app) { applicationList[i] = []; applicationList[i]['text'] = app['title']; applicationList[i]['id'] = app['slug']; }); }); alert(applicationList[0]['text']); var applicationMenu = Ext.menu.Menu({ items: applicationList }); }); 

Réponse de JSON:

 {"applications":[{"slug":"test","title":"Test"},{"slug":"hardware","title":"Hardware"}]} 

Résultat attendu:

Tester

Résultat réel (de Firebug):

ApplicationList [0] is indefined

Si je remplace l' alert() ci-dessus, avec le code suivant, je reçois une fenêtre d'alerte avec le texte "supprimer":

 for (p in applicationList) { alert(p); } 

Maintenant, je pense que la requête JSON ne remplit pas l'heure actuelle pour l' alert() donc je vais utiliser une fonction de rappel appelée pour s'assurer que la requête est terminée:

 var data; jQuery.getJSON('index.php/applications', get_applications(data)); function get_applications(data) { jQuery.each(data.applications, function (i, app) { applicationList[i] = []; applicationList[i]['text'] = app['title']; applicationList[i]['id'] = app['slug']; }); }; 

Mais maintenant, Firebug me dit que les data is undefined

J'ai l'impression d'être presque là-bas, mais j'étais presque là pendant une heure passée et je me sens comme si je ne fais que polluer la source maintenant pour essayer de le faire fonctionner.

Cela devrait le faire:

 Ext.onReady(function() { var applicationList = []; var applicationMenu; jQuery.getJSON('index.php/applications', function(data) { jQuery.each(data.applications, function (i, app) { applicationList[i] = []; applicationList[i]['text'] = app['title']; applicationList[i]['id'] = app['slug']; }); applicationMenu = Ext.menu.Menu({ items: applicationList }); }); }); 

Votre pensée est juste; La raison pour laquelle il ne fonctionne pas, c'est parce que AJAX est un processus asynchrone et que vous déclenchez la fonction getJSON, javascript continue de rouler. Votre solution ne fonctionne pas parce que le fait d'appeler un rappel nommé ne modifie pas le fait qu'il ne sera pas déclenché avant d'avoir déjà essayé d'initialiser le menu. Toute ma solution est de déplacer le code d'initilisation du menu INSIDE le rappel, tel qu'il est alors et seulement alors que vous aurez accès à la liste d'application remplie.

Vous avez raison, vous devez utiliser votre variable "applicationList" uniquement après la fin du rappel de getJSON.

Vous devez appeler Ext.menu.Menu () dans votre rappel getJSON, après jQuery.each ().

La solution de Paolo Bergantino devrait fonctionner, mais vous pouvez aussi faire votre chemin, en utilisant une fonction de rappel appelée – vous avez juste fait quelques petites erreurs dans votre code:

  1. Les données ne doivent pas être déclarées comme une variable – les données dans la "fonction get_applications (données)" représentent tout ce que .getJSON renvoie
  2. La fonction de rappel dans .getJSON devrait simplement être le nom de la fonction, sans (données)

Voici le code corrigé:

 jQuery.getJSON('index.php/applications', get_applications); function get_applications(data) { jQuery.each(data.applications, function (i, app) { applicationList[i] = []; applicationList[i]['text'] = app['title']; applicationList[i]['id'] = app['slug']; }); }; 
 $.getJSON("getq2.php",{yr:year,typ:type},function(data) { var items1 = new Array(); var j=0; for ( var i in data ) { var items = new Array(); items.push(data[i][0],Number(data[i][1])); items1[j++] = items; } console.log(items1); var plot1 = jQuery.jqplot('chartContainer', [items1], { seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { startAngle: 180, sliceMargin: 2, dataLabelThreshold: 2, // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, } }, grid: {borderWidth:0, shadow:false,background: '#d8d6cb'}, legend:{placement:'outside',show:true,location:'e',background:'transparent',marginRight:'30px'} }); });