JSON AJAX 未定义项

Question

我在通过 AJAX 显示 JSON 时遇到问题。

Feed 未显示 - 浏览器显示

未捕获的类型错误：无法读取未定义的属性“标题”

我想我在这些方面有问题：

$.each(data, function(i, item) {
            var news = '<h1>' + item.posts.title + '</h1>' 
                + '<p>' + item.posts.content + '</p>' 
                + '<p>' + item.posts.custom_fields.ecpt_chill + '</p>';

↪See the full code in action at JSFiddle

Answer 1

您得到的错误意味着typeof item.posts 是undefined；例如它没有设置为任何值。

要测试您从服务器返回的内容，请将以下行放在 $.each(data, … 之前：

console.log(JSON.stringify(data));

然后您可以查看 Web 服务器返回的 JSON。

顺便说一句，您已将请求类型设置为POST。在这种情况下，正确的方法是GET。

返回以下 JSON：

{"status":"ok","count":1,"count_total":1,"pages":1,"posts":[{"id":587,"type":"weather","slug":"conditions-for-magnitogorsk-ru-at-329-am-yekt","url":"http://www.domain.com/weather/conditions-for-magnitogorsk-ru-at-329-am-yekt/","status":"publish","title":"Conditions for Magnitogorsk, RU at 3:29 am YEKT","title_plain":"Conditions for Magnitogorsk, RU at 3:29 am YEKT","content":"<p><img src=\"http://l.yimg.com/a/i/us/we/52/20.gif\" /><br />\n<b>Current Conditions:</b><br />\nFog, -28 C<BR /><br />\n<BR /><b>Forecast:</b><BR /><br />\nWed &#8211; Partly Cloudy. High: -15 Low: -26<br />\nThu &#8211; Mostly Sunny. High: -20 Low: -24</p>\n<p><a href=\"http://us.rd.yahoo.com/dailynews/rss/weather/Magnitogorsk__RU/*http://weather.yahoo.com/forecast/RSXX0058_c.html\">Full Forecast at Yahoo! Weather</a><BR /><BR /><br />\n(provided by <a href=\"http://www.weather.com\">The Weather Channel</a>)</p>\n","excerpt":"Current Conditions: Fog, -28 C Forecast: Wed &#8211; Partly Cloudy. High: -15 Low: -26 Thu &#8211; Mostly Sunny. High: -20 Low: -24 Full Forecast at Yahoo! Weather (provided by The Weather Channel)","date":"2012-12-11 22:29:00","modified":"2012-12-21 14:06:27","categories":[],"tags":[],"author":{"id":1,"url":"","description":""},"comments":[],"attachments":[],"comment_count":0,"comment_status":"closed","custom_fields":{"ecpt_chill":["eqweqwe"]}}]}

格式化：

{
  "status": "ok",
  "count": 1,
  "count_total": 1,
  "pages": 1,
  "posts": [{
      "id": 587,
      "type": "weather",
      "slug": "conditions-for-magnitogorsk-ru-at-329-am-yekt",
      "url": "http://www.cityfacts.pro/weather/conditions-for-magnitogorsk-ru-at-329-am-yekt/",
      "status": "publish",
      "title": "Conditions for Magnitogorsk, RU at 3:29 am YEKT",
      "title_plain": "Conditions for Magnitogorsk, RU at 3:29 am YEKT",
      "content": "<p><img src=\"http://l.yimg.com/a/i/us/we/52/20.gif\" /><br />\n<b>Current Conditions:</b><br />\nFog, -28 C<BR /><br />\n<BR /><b>Forecast:</b><BR /><br />\nWed &#8211; Partly Cloudy. High: -15 Low: -26<br />\nThu &#8211; Mostly Sunny. High: -20 Low: -24</p>\n<p><a href=\"http://us.rd.yahoo.com/dailynews/rss/weather/Magnitogorsk__RU/*http://weather.yahoo.com/forecast/RSXX0058_c.html\">Full Forecast at Yahoo! Weather</a><BR /><BR /><br />\n(provided by <a href=\"http://www.weather.com\">The Weather Channel</a>)</p>\n",
      "excerpt": "Current Conditions: Fog, -28 C Forecast: Wed &#8211; Partly Cloudy. High: -15 Low: -26 Thu &#8211; Mostly Sunny. High: -20 Low: -24 Full Forecast at Yahoo! Weather (provided by The Weather Channel)",
      "date": "2012-12-11 22:29:00",
      "modified": "2012-12-21 14:06:27",
      "categories": [],
      "tags": [],
      "author": {
          "id": 1,
          "url": "",
          "description": ""
      },
      "comments": [],
      "attachments": [],
      "comment_count": 0,
      "comment_status": "closed",
      "custom_fields": {
          "ecpt_chill": ["eqweqwe"]
      }
  }]
}

查看您的代码，您正在遍历返回的 JSON 的每个键。第一个键是status，当然它没有posts 属性。

如果您想遍历返回的帖子，您应该执行以下操作：

$.each(data.posts, function(i, item) {

并调整您的代码以使用它。

Answer 2

您需要检查您尝试加载的内容。未定义意味着您没有正确加载对象。尝试使用 Firefox 的 Poster 扩展程序检查源内容。