$ .get JSON request + fill and return ARRAY

Question

I started working with the LungoJS mobile framework. I and javascript are not working fine, but really I want to change this original code:

ORIGINAL.JS

var mock = function() { var mock = []; for (var i=1; i<=5; i++){ mock.push({ id: i, name: 'name n'+i, description: 'description n'+i }) } lng.View.Template.List.create({ container_id: 'lives', template_id: 'show_music_template', data: mock }) } return { mock: mock } })(LUNGO, App); 

This original code works fine, and it's easy, now I want to execute a request using $ .get, which returns a JSON file and populates the array like ORIGINAL.JS:

JSON RESULT:

  {"result":[ {"id":"52","username":"jgali","image":"Prova_(live)387.jpeg","name":"Prova (live)","type":"music","language":"Catalan","category":"8","tags":"indie, dine prova, indie live","description":"Aquesta es una prova online de reidiou","licence":"Reidiou License","played":"54","record_time":"45","facebook_id":"1052266203_2342869925158","twitter_hash":"#Provalive","create_date":"2011-11-01 13:04:21"}, {"id":"52","username":"jgali","image":"Prova_(live)387.jpeg","name":"Prova (live)","type":"music","language":"Catalan","category":"8","tags":"indie, dine prova, indie live","description":"Aquesta es una prova online de reidiou","licence":"Reidiou License","played":"54","record_time":"45","facebook_id":"1052266203_2342869925158","twitter_hash":"#Provalive","create_date":"2011-11-01 13:04:21"} ]} 

SERVICE.JS

 var mock = function() { var mock = []; var url = 'http://localhost/app/rest/podcasts'; var data = {}; //lng.Service.get = $get lng.Service.get(url, data,function(response) { var array = []; //Do something with response jQuery.each(response.result, function() { mock.push({ id: this.id, name: this.name, description: this.description }) }); document.write(mock[1].id); }); lng.View.Template.List.create({ container_id: 'lives', template_id: 'show_music_template', data: mock }) } return { mock: mock } 

The problem is the outer loop. I can not use the "mock" array. Of course, I make a few mistakes ... but does anyone know what the problem is?

Thanks.

Answer 1

The problem is that $.get() takes time to execute and therefore is asynchronous. Asynchronous calls like this are related to using the callback function. To access the mock array, you need to nest something in this callback.

You can also make AJAX calls be synchronous in jQuery (although I, the docs, warn about this); in accordance with the documents :

By default, all requests are sent asynchronously (i.e., this is set to true by default). If you need synchronous requests, set this parameter to false. Cross-domain requests and dataType: jsonp requests do not support synchronous operation. Please note that synchronous requests can temporarily block the browser by disabling any actions while the request is active.

Answer 2

Thanks!! I solved the problem with a callback, as you said.

I am posting the code if anyone is interested:

 App.Services = (function(lng, app, undefined) { var mock = function() { var mock = new Array(); var url = 'http://localhost/app/rest/podcasts'; var data = {}; function getData (url,data,mock,callbackFnk){ lng.Service.get(url, data,function(response) { //Do something with response // now we are calling our own callback function if(typeof callbackFnk == 'function'){ callbackFnk.call(this, response); }else{ document.write("Error"); } }); } getData(url,data,mock,function(response){ jQuery.each(response.result, function() { mock.push({ id: this.id, name: this.name, description: this.description }) }); lng.View.Template.List.create({ container_id: 'lives', template_id: 'show_music_template', data: mock }) }) } return { mock: mock } })(LUNGO, App);