Can't get JSON file to parse into TableView in JavaScript using Appcelerator

Question

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"}

    }

Answer 1

You need to move everything that relies on the JSON response to be inside of the onload block. Otherwise, the table will be constructed before tableData has any data. You also aren't actually sending the xhr .

Once you get a URL that actually returns that JSON, you can use this:

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;

        var table = Titanium.UI.createTableView({
            data: tableData,
            height: 480,
            width: 480,
            top: 256,
            left: 232
        });

        win1.add(image);
        win1.add(table);
        win1.open();
    }
});
xhr.open("GET", url);
xhr.send();

Answer 2

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