Question

Hey all I’m trying to get a window populated with a table view that is populated from a network function in Titanium Studio, build: 2.1.1.201207271312. I have the data being fetched properlybut the problem is that the program continues to run without waiting for the table view to be populated properly. Here’s the code:

ui.js:

bs.ui.createTransitRoutesListWindow = function() {

    var winbsRoutesList = Titanium.UI.createWindow({
    });
    var tv2 = Ti.UI.createTableView();
    tv2 = bs.ui.createbsRouteListTableView();

    winbsRoutesList.add(tv2);       
};

bs.ui.createbsRouteListTableView = function() {

    var tv = Ti.UI.createTableView();       

    Ti.API.info('populating data');
        var busStopList = bs.db.routeStopList(); 

        tv.setData(busStopList);

        return tv;

};

db.js:

 bs.db.routeStopList = function() {
var stoplist = [];

bs.net.getRoutes(function(data) {
    Ti.API.info('data length: '+data.length);
    for (var i = 0;i<data.length;i++) {
        stoplist.push({
            title:data[i].stopName,
            id: i
        });
    }

});
return stoplist;
 }

network.js

bs.net.getRoutes = function(_cb) { 

    var xhr = Titanium.Network.createHTTPClient();
    xhr.onload = function() {  
        _cb(JSON.parse(this.responseText));

    Ti.API.info(this.responseText)
    };
    xhr.onerror = function(event) {
    }
    xhr.open("GET","<URL to valid JSON>", true);  
    //+ Ti.App.Properties.getString('currentBus','This is a string default')
    xhr.send();

};

Answer 1

bussearch.net.getRoutes() is an AJAX operation and thus it is asynchronous. This means that the code will NOT wait for it to complete. The code will proceed while the response is going. The time it will respond is not known also.

If you want to do something after the data returns, you should do everything in the callback instead or create deferred objects like jQuery (which are basically callback containers).

//db.js
bussearch.db.routeStopList = function(callback) {
    var stoplist = [];
    bussearch.net.getRoutes(function(data) {
        ....
        callback.call(this,stoplist);
    });
}

//ui.js
bussearch.ui.createBussearchRouteListTableView = function(callback) {
    var tv = Ti.UI.createTableView();       
    Ti.API.info('populating data');
    bussearch.db.routeStopList(function(busStopList){
        tv.setData(busStopList);
        callback.call(this,tv);
    }); 
};

//calling createBussearchRouteListTableView()
createBussearchRouteListTableView(function(tv){
    //tv in here is the data
    //do inside here what you want to do to tv after it's retrieved
});