代码之家 › 专栏 › 技术社区 › Mystic Hayato

Titanium Appcelerator使用API解析Youtube JSON

appcelerator titanium youtube-api json javascript

Mystic Hayato · 技术社区 · 9 年前

我在论坛上做了一项研究,结果弄糊涂了。我的演示项目是用Alloy MVC创建的。我想从Youtube API中解析一个JSON,并以烹饪的顶级相关视频为例,在TableView中显示它们。有人能告诉我怎么做吗? 我是个新人。

这是我迄今为止所做的代码:

视频XML

<Alloy>
<Window class="container">
<View id="main" onClick="youtubeFeed">
   <Label class="header">YouTube Channel</Label>
            <TableView id="results">

            </TableView>            
        </View>
    </Window>
</Alloy>

视频.js

function youtubeFeed () {

var apiKey = 'MY_API_KEY';
var perPage = 6;
var search = "Cooking";
var description;
var val;
var id;
var category = "News";

var query = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=search&maxResults=per_page&videoCategoryId=category&safesearch=strict&key=apikey';
var response = JSON.parse(this.responseText);

require("/api").create({
    url: query,
    type: "GET",
    success: onSuccess,
    error: onError
});

function onSuccess(e){
    console.log(e.data);
}

function onError(e){
    console.log("error");
}

}

3 回复 | 直到 9 年前

Pierre vDEV 9 年前

您已经从Youtube API获得了JSON答案,现在米加和雷内给了你提示。
有一些 guides 您可能需要阅读以了解从Youtube返回时JSON对象的样子(使用他们的API浏览器)。

正在从读取 Titanium.UI.TableView 文档,您应该添加 TableViewRow 对于中的每个元素 response.items :

for (var i=0; i<response.items.length; i++){
    var video, row, videoTitle;

    video = response.items[i];

    row = Ti.UI.createTableViewRow({
        width: Ti.UI.FILL,
        height: 100
    }),

    videoTitle = Ti.UI.createLabel({
        text: video.snippet.title,
        videoId: video.id.videoId, // custom prop
        width: Ti.UI.SIZE,
        height: 80
    });
    row.add(videoTitle);

    $.results.appendRow(row);
}

倾听 click 来自您的事件 TableView 以便您可以打开新控制器来播放指定的视频:

$.results.addEventListener('click', function onClick(event) {
    var row = event.row,
        videoId = row.videoId;
    // TODO...
});

祝你好运

miga 9 年前

您需要在xhr的帮助下调用实际的API url。从一开始,看看 https://github.com/m1ga/titanium-libraries/blob/master/api.js

在projectname/app/文件夹中创建一个lib文件夹,并将js文件放在那里,然后在yor函数中这样调用它:

require("/api").create({
    url: query,
    type: "GET",
    success: onSuccess,
    error: onError
});

function onSuccess(e){
    console.log(e.data);
}

function onError(e){
    console.log("error");
}

并确保查询字符串正确。看起来您已经使用了一个php示例,因为它在末尾使用了$和.来连接。

Rene Pot 9 年前

我不确定您使用什么库来获取JSON,但在获取JSON之前,解析JSON不起作用。

这是它应该如何工作的一个基本示例:

var url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=search&maxResults=per_page&videoCategoryId=category&safesearch=strict&key=apikey';
var xhr = Titanium.Network.createHTTPClient({
    onload: function() {
        var response = JSON.parse(this.responseData);
        // you've got your JSON here, after the API call succeeded
    },
    timeout: timeout
});
xhr.open('GET', url);
xhr.send();