Titanium Studio - Putting my detailed data into a table - json

Question

I have a data table and on eventlistener click, the row becomes a detailed window with the data of the row selected. I have the data as labels, but I want to display some of the data as a table with row titles (particularly my vars, mon, tues, weds, thurs, fri, sat, sund). I attempted to create a table within the eventlistener, but it did not appear. how would I approach this? Below is my code:
var win = Titanium.UI.currentWindow;
var data = [];
var barList = Titanium.UI.createTableView({
height: 366,
width: 320,
top: 0,
left: 0
});
win.add(barList);
barList.addEventListener('click', function (e) {
Ti.API.info('data: ' + JSON.stringify(e.rowData.data));
var detail = Ti.UI.createWindow({
backgroundColor: '#fff',
data: e.rowData.data, // use rowData
title: e.rowData.data.name, // now you can access name as well as address
});
var lbl = Ti.UI.createLabel({
text: JSON.stringify(e.rowData.data.address),
top: 10
});
detail.add(lbl); // just so you can see it here as well
var mon = Ti.UI.createLabel({
text: e.rowData.data.mon_special,
top: 30
});
detail.add(mon);
var tues = Ti.UI.createLabel({
text: e.rowData.data.tues_special,
top: 50
});
detail.add(tues);
var weds = Ti.UI.createLabel({
text: e.rowData.data.weds_special,
top: 50
});
detail.add(weds);
var thurs = Ti.UI.createLabel({
text: e.rowData.data.thurs_special,
top: 50
});
detail.add(thurs);
var fri = Ti.UI.createLabel({
text: e.rowData.data.fri_special,
top: 50
});
detail.add(fri);
var sat = Ti.UI.createLabel({
text: e.rowData.data.sat_special,
top: 50
});
detail.add(sat);
var sund = Ti.UI.createLabel({
text: e.rowData.data.sun_special,
top: 50
});
detail.add(sund);
detail.open({
modal: true
});
});
var xhr = Titanium.Network.createHTTPClient();
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({
className: 'bar-row',
data: json[i].bar, // pass everything because you also use name later on
hasChild: true,
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);
}
barList.setData(data);
};
xhr.open('GET', 'http://example.com/bars.json');
xhr.send();

Answer 1

as your new to Titanium it think it is difficult to put data
we can approch this type of method in following ways
1) store the data you called i mean your bar dat
var win = Titanium.UI.currentWindow;
var data = [];
var json=''
var barList = Titanium.UI.createTableView({
height: 366,
width: 320,
top: 0,
left: 0
});
win.add(barList);
var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function () {
json = JSON.parse(this.responseText);
Ti.API.info(json.length);
for (var i = 0; i < json.length; i++) {
var row = Titanium.UI.createTableViewRow({
className: 'bar-row',
data: json[i].bar, // pass everything because you also use name later on
hasChild: true,
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);
}
barList.setData(data);
};
xhr.open('GET', 'http://site.com/bars.json');
xhr.send();
barList.addEventListener('click', function (e) {
var newwindow =require('tabledetails')
var wind= new newwindow(json[e.index]) /// here we are sending particular bar data
wind.open({modal:true})
})
2) show the details using the data
-----> tabledetails.js
function details(data){
var details =Ti.UI.createWindow({backgroundColor="#fff"})
var lbl = Ti.UI.createLabel({
text: JSON.stringify(data.address),
top: 10
});
detail.add(lbl); // just so you can see it here as well
var mon = Ti.UI.createLabel({
text: data.mon_special,
top: 30
});
detail.add(mon);
var tues = Ti.UI.createLabel({
text: data.tues_special,
top: 50
});
detail.add(tues);
var weds = Ti.UI.createLabel({
text: data.weds_special,
top: 50
});
detail.add(weds);
var thurs = Ti.UI.createLabel({
text: e.rowData.data.thurs_special,
top: 50
});
detail.add(thurs);
var fri = Ti.UI.createLabel({
text: data.fri_special,
top: 50
});
detail.add(fri);
var sat = Ti.UI.createLabel({
text: e.rowData.data.sat_special,
top: 50
});
detail.add(sat);
var sund = Ti.UI.createLabel({
text: data.sun_special,
top: 50
});
detail.add(sund);
return details;
}
module.exports=detials