无法从Twitter（AJAX）检索数据

Question

我正在尝试创建一个网页，当用户搜索某个主题时，该页面将显示某个城市中与该主题相关的推文。 该请求已成功发送到Twitter-响应为200，我可以在chrome开发人员工具中看到响应数据。 但是，我无法将数据发布到页面上，甚至无法登录控制台。 我想知道我是否打错了电话？ 我专门在看这个功能：

// Function that appends search result to DOM
var formatTweet = function(tweets) {

  //console.log(tweets);

  // clone template
  var result = $('.topic-template .topic-results').clone();

  // console.log(result); // ?? not logging result

  var image = result.find('.profile-img');
  image.attr('src', tweets.profile_image_url);

  var status = result.find('.status');
  status.append(tweets.text);

  var screenName = result.find('.screen-name');
  screenName.append(tweets.statuses.user.screen_name);

  var location = result.find('location');
  location.append(tweets.user.location);

  var time = result.find('.time');
  time.append(tweets.created_at); 

  return result; 
}; // end showUser function

也许我引用的tweets对象不正确？ 我收到一条错误消息： Uncaught TypeError: Cannot read property 'screen_name' of undefined.

还有一个错误提示：

Error in event handler for (unknown): Cannot read property 'innerHTML' of null
Stack trace: TypeError: Cannot read property 'innerHTML' of null
    at Object.AMZUWLXT.tests.popNodeData (chrome-extension://ciagpekplgpbepdgggflgmahnjgiaced/contentScripts/tests.js:79:33)
    at Object.<anonymous> (chrome-extension://ciagpekplgpbepdgggflgmahnjgiaced/contentScripts/tests.js:168:28)
    at Object.<anonymous> (chrome-extension://ciagpekplgpbepdgggflgmahnjgiaced/contentScripts/tests.js:12:28)
    at Object.<anonymous> (chrome-extension://ciagpekplgpbepdgggflgmahnjgiaced/contentScripts/tests.js:12:28)
    at chrome-extension://ciagpekplgpbepdgggflgmahnjgiaced/contentScripts/tests.js:12:28
    at Object.runPage (chrome-extension://ciagpekplgpbepdgggflgmahnjgiaced/contentScripts/isProduct.js:159:12)
    at chrome-extension://ciagpekplgpbepdgggflgmahnjgiaced/contentScripts/runIsProduct.js:15:22
    at messageListener (extensions::messaging:340:9)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at EventImpl.dispatchToListener (extensions::event_bindings:395:22)

我不知道这是什么意思。

我不确定如何调试。

这是链接： http : //amykirst.github.io/twitter-api/

Answer 1

使用您执行的GET请求，您将所有相关状态作为一条tweet对象作为响应。

以下是您首次对Twitter进行api调用后得到的结果。

Statuses

    0 Object { metadata={...}, created_at="Thu Jul 10 02:08:11 +0000 2014", id=487055653404672000, more...}
    1 Object { metadata={...}, created_at="Wed Jul 09 22:32:23 +0000 2014", id=487001346227175400, more...}
    2 Object { metadata={...}, created_at="Wed Jul 09 22:06:00 +0000 2014", id=486994705406648300, more...}     
    3 Object { metadata={...}, created_at="Wed Jul 09 21:58:41 +0000 2014", id=486992863012454400, more...}
    ...
    ...

全部获取后，您应该对其进行迭代，然后对其进行格式化。

换句话说，在您的函数中，您应该只格式化一个对象，即一条推文。

如果检查响应的属性，您将看到，例如，第一个对象具有如下属性：

0   
  contributors  null
  coordinates   null
  created_at    "Thu Jul 10 02:08:11 +0000 2014"
  entities      Object { hashtags=[0], symbols=[0], urls=[1], more...}
  favorite_count 0
  favorited     false
  ....
  ....
  text          "Game of Thrones Season I... http://t.co/y5gf52xXg5"
  user           Object { id=49376425, id_str="49376425", name="Mark Yesilevskiy", more...}

您会看到user属性是其中的一个对象。 因此，例如，如果您要访问第一个对象的用户名属性，则可以像Statuses[0].user.name一样从根目录访问它

因此，如果我们遇到您的问题，在一个对象中，您将无法像您一样访问screen_name参数，这就是为什么会出现该错误的原因。

要解决此问题，请先成功获取所有tweet，然后对其进行迭代，然后对其进行格式化。

$.each(tweets.statuses, function(i, tweet) {
     formatTweet(tweet).appendTo('#topic-results');
});​

在您的formatTweet函数中，您需要按照我上面的说明进行更改：

screenName.append(tweets.statuses.user.screen_name);

至：

screenName.append(tweets.user.screen_name);

另外，您实际上正在那里访问一条推文，因此它应该是一条tweet tweets ，而不是逻辑上的tweet tweets ，但这不是问题，因为它只是一个参数。

同样这也是错误的：

var location = result.find('location');

改成：

var location = result.find('.location');

另外，将此div添加到您的html中，将在其中添加推文：

<div id="topic-results"></div>

这是您可以检查的快速提琴 ： http : //jsfiddle.net/zeZ38/