Titanium Mobile Detailed view for row data

Question

I am trying to create a detailed view of my json data. I am unsure of how to really approach it. I have the eventlistener, but I am unsure of how to pull data based on the name of the bar selected. Here is my json pull:

var win =Titanium.UI.currentWindow;

var data = [];

var xhr = Titanium.Network.createHTTPClient();

var barList = Titanium.UI.createTableView({
    height:366,
    width: 320,
    top:0,
    left:0
});

win.add(barList);

xhr.onload = function () {
    var json = JSON.parse(this.responseText);
    Ti.API.info(json.length);
    for (var i = 0; i < json.length; i++) {

        var row = Titanium.UI.createTableViewRow({
            hasChild: true,
            className: 'bar-row',
            filter: json[i].bar.name
        });
        var titleLabel = Titanium.UI.createLabel({
            text: json[i].bar.name,
            font: {
                fontSize: 14,
                fontWeight: 'bold'
            },
            left: 70,
            top: 5,
            height: 20,
            width: 210
        });
        row.add(titleLabel);
        var addressLabel = Titanium.UI.createLabel({
            text: json[i].bar.address,
            font: {
                fontSize: 10,
                fontWeight: 'normal'
            },
            left: 70,
            top: 25,
            height: 40,
            width: 200
        });
        row.add(addressLabel);
        var iconImage = Titanium.UI.createImageView({
            text: json[i].bar.logo_file_name,
            width: 50,
            height: 50,
            left: 10,
            top: 10
        });
        row.add(iconImage);
        data.push(row);

        row.addEventListener('click',function(e){
        var detail = Ti.UI.createWindow({
            title: e.rowData.title
        });

    detail.open({modal: true});

})

    }
    barList.data = data;



};


xhr.open('GET', 'http://site.com/db.json');

xhr.send();

JSON data: I'm looking to pull the name, description, mon_special, tues_special, etc., for the bar selected

http://pastie.org/private/eyp9m5il6hrulbds76a8q

Answer 1

Simplest way to do this is attach the data to the row you created:

var row = Titanium.UI.createTableViewRow({
    hasChild: true,
    className: 'bar-row',
    filter: json[i].bar.name,
    barData : json[i].bar
});

Then access it through the event listener added to the TableView itself (don't use the rowData object of the event if you've created the row itself)

barList.addEventListener('click', function(e) {
    // Get the row clicked, then get our custom attribute
    var passedJSONBarData = e.row.barData;
    // Now pass along through the window, or build the window here
    var detail = Ti.UI.createWindow({
        title: passedJSONBarData.title,
        barData : passedJSONBarData
    });

    detail.open({modal: true});
});

I add the event listener to the table so that we only create the function once you may get some performance / memory savings using this approach.