I have got a problem with displaying the JSON via AJAX.
The feed isn't displaying - the browser says
Uncaught TypeError: Cannot read property 'title' of undefined
I guess I've got something wrong in these:
$.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>';
You need to check the content you're trying to load. Undefined means you haven't properly loaded an object. Try to inspect the source content with something like Firefox's Poster extension.
The error you're getting means that typeof item.posts
is undefined
; e.g. it's not set to any value.
To test what you're getting back from the server, place the following line right before $.each(data, …
:
console.log(JSON.stringify(data));
You can then view the JSON that is returned by the web server.
By the way, you've set the request type to POST
. The right method in this case is GET
.
The following JSON is returned:
{"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 />
<b>Current Conditions:</b><br />
Fog, -28 C<BR /><br />
<BR /><b>Forecast:</b><BR /><br />
Wed – Partly Cloudy. High: -15 Low: -26<br />
Thu – Mostly Sunny. High: -20 Low: -24</p>
<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 />
(provided by <a href=\"http://www.weather.com\">The Weather Channel</a>)</p>
","excerpt":"Current Conditions: Fog, -28 C Forecast: Wed – Partly Cloudy. High: -15 Low: -26 Thu – 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"]}}]}
Formatted:
{
"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 />
<b>Current Conditions:</b><br />
Fog, -28 C<BR /><br />
<BR /><b>Forecast:</b><BR /><br />
Wed – Partly Cloudy. High: -15 Low: -26<br />
Thu – Mostly Sunny. High: -20 Low: -24</p>
<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 />
(provided by <a href=\"http://www.weather.com\">The Weather Channel</a>)</p>
",
"excerpt": "Current Conditions: Fog, -28 C Forecast: Wed – Partly Cloudy. High: -15 Low: -26 Thu – 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"]
}
}]
}
Looking at your code, you are looping over each key of the returned JSON. The first key is status
, which, of course, doesn't have a posts
property.
If you want to loop over the returned posts, you should do something like:
$.each(data.posts, function(i, item) {
and adjust your code to work with that.