how to fill a TableView with a single field from a Custom Object?

Question

So I'm trying to fill a TableView with the values from a single field in an array of Custom Objects, but my TableView isn't being filled with the array I'm getting. This is my code:

function SearchWindow(){
    var self = Ti.UI.createWindow({
        backgroundColor:'#d0d0d0d'
    });
    var Cloud = require('ti.cloud');
    Cloud.debug=true;

    var searchBar = Ti.UI.createSearchBar({
        showCancel:false
    });
    var data = [];
    Cloud.Objects.query({
        classname:'Reservacion'
    }, function(e){
        if(e.success){
            for(var i=0; i< e.Reservacion.length; i++){
                data.push({title : e.Reservacion[i].nombre});
            }
        } else {
            alert('Error \n ' + ((e.error && e.message) || JSON.stringify(e)));
        }
    });

    var tableView = Ti.UI.createTableView({
        backgroundColor:'#d0d0d0',
        search:searchBar,
        data: data,
        filterAttribute : 'title'
    });

    self.add(tableView);
    return self;
}

I'm filling the data array with the value from a field called nombre from a Custom Object called Reservacion , but the data isn't being shown on the Table View. Is my approach wrong? If so, then how can I fill my Table View with the desired data?

Answer 1

You are pushing the value of nombre field to the data array after creating the table view. This means when the table view is created, there are no rows, so that is why you are seeing nothing. Fix this by setting tableView.data = data; after data is fully populated (in your Cloud.Objects.query callback).

Instantiate your table view without specifying data:

var tableView = Ti.UI.createTableView({
    backgroundColor:'#d0d0d0',
    search:searchBar,
    filterAttribute:'title'
});

I hope it works.