javascript - Titanium Appcelerator 使用 API 解析 Youtube JSON

Question

我在论坛上进行了研究，但我很困惑。我的演示项目是使用 Alloy MVC 创建的。我想从 Youtube API 解析 JSON，其中包含 HitTest 门的 cooking 视频，并在 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");
}

}

Answer 1

既然 Miga 和 Rene 为您提供了提示，您已经从 Youtube API 获得了 JSON 答案。
有一些guides您可能想了解一下从 Youtube 回来后 JSON 对象的样子(使用他们的 API 浏览器)。

阅读自Titanium.UI.TableView文档中，您应该为 response.items 中的每个元素添加一个 TableViewRow:

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

监听 TableView 中的 click 事件，以便您可以打开新 Controller 来播放指定视频:

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

祝你好运!