如何仅使用头像显示 Twitter 列表中的成员列表答案

【问题标题】：How to display a list of members from a twitter list with just their Avatar如何仅使用头像显示 Twitter 列表中的成员列表
【发布时间】：2012-11-17 05:20:26
【问题描述】：

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

我可以从 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 文档似乎不太友好，我也没有在网上找到任何解决此问题的方法。

【问题讨论】：

标签： jquery ajax json list twitter

【解决方案1】：

试试这个：

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
  $.ajax({
    url: "https://api.twitter.com/1/lists/statuses.json?slug=customers&owner_screen_name=vijaysales",
    dataType: "jsonp",
    success: function(r) {
      listTweets(r);
    }
  });
  function listTweets(r) {
    var output = '<ul>';
    $.each(r, function(key, val) {
      var text = r[key].text;
      console.log(JSON.stringify(r[key]));
      var thumbnail = r[key].user.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);
  }
})
</script>
</head>
<body>
<div id="tweetlist"></div>  
</body>
</html>

您可以使用success 方法。我修复了关于 profile_image_url 的问题。

更新

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
  $.ajax({
    url: "https://api.twitter.com/1/lists/members.json?slug=customers&owner_screen_name=vijaysales",
    dataType: "jsonp",
    success: function(r) {
      listTweets(r);
    }
  });
  function listTweets(r) {
    var output = '<ul>';
    $.each(r.users, function(n, user) {
      var text = user.status ? user.status.text : '';
      var thumbnail = user.profile_image_url;
      var name = user.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);
  }
})
</script>
</head>
<body>
<div id="tweetlist"></div>  
</body>
</html>

【讨论】：

非常感谢您的回复马特，我也可以使用我发布的代码获取 statuses.json。问题是从 members.json 获取结果。 :]

【解决方案2】：

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 的结构。

【讨论】：

辛苦了！真的很感谢你的迅速反应，很长一段时间以来我一直在为此烦恼。 :D