无法使用Appcelerator将JSON文件解析为JavaScript中的TableView

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:

我正在尝试使用Appcelerator将JSON文件放入JavaScript的表中,并且我不太清楚它为什么在编译到示例页面时输出为空表。我是处理JavaScript和JSON格式的新手,所以如果你看到任何愚蠢的逻辑或语法错误,请放轻松我也告诉我如何解决我的问题:

// 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:

url返回的JSON:

    {"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 个解决方案

#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.

您需要将依赖于JSON响应的所有内容移动到onload块内。否则,将在tableData具有任何数据之前构造该表。你也没有真正发送xhr。

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

获得实际返回该JSON的URL后,您可以使用:

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();

#2

Jodo, you really need to read documentations on using HTTP Client & Set Data on TableView.

Jodo,您真的需要阅读有关在TableView上使用HTTP客户端和设置数据的文档。

There is a very clean example in the docs of Titanium's Working With Remote Data

Titanium使用远程数据的文档中有一个非常干净的例子

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.

您正在使用的URL不会返回除该网站的HTML输出之外的任何内容,其次您不能简单地在tableview上设置数据属性,除非您的数据变量以这种方式之一进行格式化。

[ {title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'} ];

[{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

此外,TableView的data属性采用行/节的数组或格式良好的字典。有关更多TableView指南,请参阅此处

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

我们建议您在尝试之前阅读文档,如果您还没有这样做过。它将帮助您更好地学习和理解,绝对可以节省您宝贵的时间。 :) 谢谢

#1