jquery - 如何仅显示 Twitter 列表中的成员列表及其头像

Question

我一直在尝试找出一种方法来列出特定列表中所有成员的个人资料图片。

我可以从 API URL 获取状态

 $.ajax({
  url: "https://api.twitter.com/1/lists/statuses.json?slug=stringed-chaos&owner_screen_name=darkpsy",
  dataType: "jsonp",
  jsonpCallback: "listTweets"
});

function listTweets(r) { 
console.log(r);
var output = '<ul>';

$.each(r, function(key, val) {
    var text = r[key].text;
    var thumbnail = r[key].user.profile_image_url;
    var name = r[key].user.name;

    output += '<li>';
    output += '<img src="' + thumbnail +'" alt="Photo of ' + name + '">';
    output += '<div>' + text + '</div>';
    output += '</li>';      
}); //go through each tweet
output += '</ul>';

当我将 API URL 更改为 GET 列表/成员 URL 时(如 official twitter doc here 中所述)我无法提取任何信息(未定义)。我可以很好地解析 statuses.json，但 Members.json 不返回任何内容

代码如下:

    $.ajax({
  url: "https://api.twitter.com/1/lists/members.json?slug=stringed-chaos&owner_screen_name=darkpsy",
  dataType: "jsonp",
  jsonpCallback: "listTweets"
});

function listTweets(r) { 
console.log(r);
var output = '<ul>';

    $.each(r, function(key, val) {
        var text = r[key].text;
        var thumbnail = r[key].profile_image_url;
        var name = r[key].screen_name;
            output += '<li>';
        output += '<img src="' + thumbnail +'" alt="Photo of ' + name + '">';
        output += '<div>' + text + '</div>';
        output += '</li>';      
    }); //go through each tweet
    output += '</ul>';
    $('#tweetlist').html(output);}`

非常感谢任何类型的帮助，因为 twitter API 文档似乎不太友好，而且我也没有在网上找到任何内容来解决这个问题。

Answer 1

Twitter 的成员列表 API 以与状态 API 不同的格式返回数据。您要查找的数据包含在 users[] 下。这是一个固定的解决方案:

$.ajax({
    url: "https://api.twitter.com/1/lists/members.json?slug=customers&owner_screen_name=vijaysales",
    dataType: "jsonp",
    success : function(data) {listTweets(data["users"]);}
});

function listTweets(r) {
    var output = '<ul>';

    $.each(r, function(key, val) {
        var text = r[key].text;
        var thumbnail = r[key].profile_image_url;
        var name = r[key].screen_name;


        output += '<li>';
        output += '<img src="' + thumbnail +'" alt="Photo of ' + name + '">';
        output += '<div>Photo of ' + name + '</div>';
        output += '</li>';      
    }); //go through each tweet
    output += '</ul>';
    $('#tweetlist').html(output);
}

我将回调从 jsonpCallback 更改为 success() 因为 jsonpCallback 似乎在 jsFiddle 的最新版本 jQuery 上工作得不太好.

在 jsFiddle 上尝试一下:http://jsfiddle.net/vCA4F/并在 jsonviewer 上查看返回的 JSON 结构.