Titanium Mobile Detailed view for row data - json

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.