I’m working on a jquery mobile script to get json from my wordpress site but its not displaying anything and returns with a: ‘Uncaught TypeError: Cannot read property ‘length’ of undefined’ error. I know i’m messing up somewhere with parsing the json, but i happen to be a javascript noob. To the guy that both fixes and explains it to me, i thank you.
HTML:
ListView
<div data-role="page" id="home">
<div data-role="content">
<div class="example-wrapper" data-iscroll>
<ul data-role="listview" id="post-list" data-theme="a"></ul>
</div>
</div>
</div>
PageView
<div data-role="page" id="headline">
<div data-role="content">
<ul data-role="listview" id="post-data" data-theme="a"></ul>
</div>
</div>
JavaScript:
$(document).on('pageinit', '#home', function () {
$.ajax({
url: 'http://chris.floppytron.com/api/get_recent_posts/',
dataType: "jsonp",
success: function (result) {
ajax.parseJSONP(result);
},
error: function (request, error) {
alert('Network error has occurred please try again!');
}
});
});
$(document).on('pagebeforeshow', '#headline', function () {
$('#post-data').empty();
$.each(postInfo.result, function (i, row) {
if (row.id == postInfo.id) {
$('#post-data').append('<li>' + row.title + '</li>');
$('#post-data').append('<li>' + row.date + '</li>');
$('#post-data').append('<li>' + row.categories + '</li><br />');
$('#post-data').append('<li>' + row.content + '</li>');
$('#post-data').listview('refresh');
}
});
});
$(document).on('vclick', '#post-list li a', function () {
postInfo.id = $(this).attr('data-id');
$.mobile.changePage("#headline", {
transition: "slide",
changeHash: false
});
});
var postInfo = {
id: null,
result: null
}
var ajax = {
parseJSONP: function (result) {
postInfo.result = result.results;
$.each(result.results, function (i, row) {
console.log(JSON.stringify(row));
$('#post-list').append('<li><a href="" data-id="' + row.id + '"><img src="' + row.thumbnail + '"/><h3>' + row.title + '</h3><p>' + row.categories + '</p><br /><p>' + row.date + '</p></a></li>');
});
$('#post-list').listview('refresh');
}
}
There is no function
$.parseJSONP
it’s$.parseJSON
without “P”. Anyway, you don’t need to parse the returned Ajax result since it is ready to be populated.The returned array has no
.results
property, it is.posts
.Fixed code