I’m trying to get a JSON file into a table in JavaScript using Appcelerator and I’m not quite sure why it is outputting as an empty table when compiling to an example page. I’m rather new to dealing with both JavaScript and JSON formats, so if you see any silly logical or syntax mistakes, please go easy on me and also let me know how I can fix my issue:
// Set the background color with no windows or tabs
Titanium.UI.setBackgroundColor('#000');
// Create the window
var win1 = Titanium.UI.createWindow({
title:'Challenge Window',
backgroundColor:'#fff',
});
// Store the image and its properties
var image = Titanium.UI.createImageView({
image: "https://myavantiservices.files.wordpress.com/2015/02/helloworld.gif",
height: 380,
width: 380,
center: 512,
top: -50
});
var tableData;
// Parse our JSON file using onload
var url = "https://www.sitepoint.com/twitter-json-example/";
var json;
var xhr = Ti.Network.createHTTPClient({
onload: function() {
json = JSON.parse(this.responseText);
tableData = json;
}
});
// Create the table and insert the JSON data
var table = Titanium.UI.createTableView({
data: tableData,
height: 480,
width: 480,
top: 256,
left: 232
});
// Add the image to the window and open the window
win1.add(image);
win1.add(table);
win1.open();
The JSON returned by the url:
{"results":[
{"text":"@twitterapi https://code.google.com/archive/p/twitter-api/issues/353",
"to_user_id":396524,
"to_user":"TwitterAPI",
"from_user":"jkoum",
"metadata":
{
"result_type":"popular",
"recent_retweets": 109
},
"id":1478555574,
"from_user_id":1833773,
"iso_language_code":"nl",
"source":"twitter< /a>",
"profile_image_url":"http://s3.amazonaws.com/twitter_production/profile_images/118412707/2522215727_a5f07da155_b_normal.jpg",
"created_at":"Wed, 08 Apr 2009 19:22:10 +0000"},
... truncated ...],
"since_id":0,
"max_id":1480307926,
"refresh_url":"?since_id=1480307926&q=%40twitterapi",
"results_per_page":15,
"next_page":"?page=2&max_id=1480307926&q=%40twitterapi",
"completed_in":0.031704,
"page":1,
"query":"%40twitterapi"}
}
2
Answers
You need to move everything that relies on the JSON response to be inside of the
onload
block. Otherwise, the table will be constructed beforetableData
has any data. You also aren’t actually sending thexhr
.Once you get a URL that actually returns that JSON, you can use this:
Jodo, you really need to read documentations on using HTTP Client & Set Data on TableView.
There is a very clean example in the docs of Titanium’s Working With Remote Data
The url you are using is not returning anything other than the HTML output for that website, and secondly you can’t simply set data property on tableview unless your data variable is formatted in one of this way.
[ {title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'} ];
Moreover, TableView’s data property takes an array of Rows/Sections or a well-formatted dictionary. See this for more TableView Guide
We suggest you to please read the documentation before trying anything if you have not done that ever before. It will help you learn & understand better and definitely will save your precious time. 🙂 Thanks