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

【问题标题】：Can't get JSON file to parse into TableView in JavaScript using Appcelerator无法使用 Appcelerator 将 JSON 文件解析为 JavaScript 中的 TableView
【发布时间】：2016-05-18 22:57:07
【问题描述】：

我正在尝试使用 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();

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

    }

【问题讨论】：

不，编译时没有控制台错误。
不是在编译时，我的意思是在浏览器的开发者工具中:)
哦，对不起。不，Chrome 中也没有错误。

标签： javascript json parsing appcelerator appcelerator-titanium

【解决方案1】：

您需要将依赖 JSON 响应的所有内容移到 onload 块内。否则，表将在tableData 有任何数据之前构建。您实际上也没有发送xhr。

一旦你得到一个实际返回该 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();

【讨论】：

我不认为这是解决方案。当我尝试这样做时，我的窗口甚至没有在浏览器中形成，我只剩下黑屏
另外，我认为通过您对我帖子的编辑，我可能已经找到了我的问题所在。我使用的 url 有一个返回 JSON 文件的示例，但地址本身不返回 JSON 文件。 sitepoint.com/twitter-json-example
我已经更新了我的答案。我注意到您实际上并没有发送xhr 和url。是的，您需要使用一个实际包含所需数据的 URL。
不幸的是仍然无法正常工作：/。也许我在 Appcelerator 编译到浏览器中的方式上遗漏了一些基本的东西？
我把文件上传到这里：raw.githubusercontent.com/44castle/testing-json/master/…试试看？

【解决方案2】：

Jodo，您确实需要阅读有关使用 HTTP Client 和 Set Data on TableView 的文档。

Titanium's Working With Remote Data 的文档中有一个非常干净的示例

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

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

此外，TableView 的 data 属性采用 Rows/Sections 数组或格式良好的字典。更多信息请参见TableView Guide

如果您以前从未这样做过，我们建议您在尝试任何操作之前先阅读文档。它将帮助您更好地学习和理解，绝对会节省您宝贵的时间。 :) 谢谢

【讨论】：