Geek Answers Handbook

Multidimensional arrays and jQuery getJSON

I was sent a getJSON request to the controller in my application, this controller returns a valid JSON with 2 "applications". I know this as a fact, as if I moved the warning statement to jQuery every function, it would give me the expected result.

I am trying to store this data in a multidimensional array so that I can use it later using the 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 }); });

JSON answer:

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

Expected Result:

Test

Actual result (from Firebug):

applicationList [0] - undefined

If I replaced alert() above with the following code, I get one warning window with the text "remove":

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

Now, I think the JSON request does not complete on time for alert() , so I will use the callback function with the name to make sure the request is complete:

 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']; }); };

But now Firebug tells me that data is undefined ...

It seems to me that I am almost there, but I have been almost there for the last hour, and it seems to me that I am just polluting the source now, trying to make it work.

+2
source share
4 answers

This should do it:

 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 }); }); });

Your thinking is correct; the reason it doesn't work is because AJAX is an asynchronous process, and when you run the getJSON function, javascript continues to drive trucks. Your solution does not work, because its call by name does not change the fact that it will not start until you try to initialize the menu. My whole solution is to move the initialization code of the INSIDE menu of the callback, since then and only then you will have access to the completed list of applications.

+6
source

You are correct, you should use the variable "applicationList" only after the getJSON callback is complete.

You must call Ext.menu.Menu () inside your getJSON callback after jQuery.each ().

+3
source

The Paolo Bergantino solution should work, but you can also do it your own way using the specified callback function - you just made a few small mistakes in your code:

  • data should not be declared as variables - data in the "get_applications (data) function" simply means it returns .getJSON
  • The callback function in .getJSON should just be the name of the function without (data)

Here's the corrected code:

 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']; }); };
+1
source 
 $.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'} }); });
0
source

More articles:


All Articles