I am creating posts page for an app. I am using JSON API and jQuery for this.
It pulls all the posts if I do not call the thumbnail image but it pulls/shows only three posts if I call the thumbnail. I am so confused about this.
HTML markup :
<div class="page_single layout_fullwidth_padding">
<div class="posts">
</div>
</div>
jQuery/Ajax:
myApp.onPageInit('blog', function (page) {
var rootURL = 'https://www.example.com/wp-json/wp/v2/posts';
$.ajax({
type: 'GET',
url: rootURL,
dataType: 'json',
success: function(data){
$.each(data, function(index, value) {
$('.posts').append('<div class="post_entry"><div class="post_thumb"><a href="blog-single.html"><img width="100%" src="'+value.better_featured_image.source_url+'" alt="" title="" /></a><div class="post_thumb_details"><a href="#" class="open-popup" data-popup=".popup-social"><img src="images/icons/white/love.png" alt="" title="" /></a></div></div><div class="post_details">' +
'<h2><a href="blog-single.html">'+value.title.rendered+'</a></h2>' +
'<p>'+value.excerpt.rendered+'</p></div></div>');
;
});
},
error: function(error){
console.log(error);
}
});
})
And I am getting following errors in the console tab:
Uncaught TypeError: Cannot read property 'source_url' of null
at Object.<anonymous> (my-app.js:97)
at Function.each (jquery-1.12.4.min.js:2)
at Object.success (my-app.js:96)
at i (jquery-1.12.4.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2)
at y (jquery-1.12.4.min.js:4)
at XMLHttpRequest.c (jquery-1.12.4.min.js:4)
Why this can pull source_url for first three posts and can not for other posts? seems so weird.
if I chage this line
<img width="100%" src="'+value.better_featured_image.source_url+'" alt="" title="" />
to this / use a hardcoded image source like this
<img width="100%" src="http://www.example.com/images/01.jpg" alt="" title="" />
It shows all the posts.
This is a section/part of my example json response
{
"id":2304,
"date":"2017-02-04T13:27:53",
"date_gmt":"2017-02-04T07:57:53",
"guid":{
"rendered":"https:\/\/www.example.com\/?p=2304"
},
"modified":"2017-02-05T15:11:38",
"modified_gmt":"2017-02-05T09:41:38",
"slug":"wann-ist-die-beste-zeit-um-arugam-bay-zu-besuchen-wetter-saisonen",
"type":"post",
"link":"https:\/\/www.example.com\/wann-ist-die-beste-zeit-um-arugam-bay-zu-besuchen-wetter-saisonen\/",
"title":{
"rendered":"Wann ist die beste Zeit um Arugam Bay zu besuchen? – Arugam Bay Wetter & Saisonen \u2013"
},
"better_featured_image":{
"id":2268,
"alt_text":"When to visit Arugam bay - Surfing in Arugam bay",
"caption":"",
"description":"",
"media_type":"image",
"media_details":{
"width":1600,
"height":1200,
"file":"2017\/02\/IRqSZt.jpg",
"sizes":{
"thumbnail":{
"file":"IRqSZt-150x150.jpg",
"width":150,
"height":150,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-150x150.jpg"
},
"medium":{
"file":"IRqSZt-300x225.jpg",
"width":300,
"height":225,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-300x225.jpg"
},
"medium_large":{
"file":"IRqSZt-768x576.jpg",
"width":768,
"height":576,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-768x576.jpg"
},
"large":{
"file":"IRqSZt-1024x768.jpg",
"width":1024,
"height":768,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-1024x768.jpg"
},
"tiny-lazy":{
"file":"IRqSZt-30x23.jpg",
"width":30,
"height":23,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-30x23.jpg"
},
"shop_thumbnail":{
"file":"IRqSZt-180x180.jpg",
"width":180,
"height":180,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-180x180.jpg"
},
"shop_catalog":{
"file":"IRqSZt-300x300.jpg",
"width":300,
"height":300,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-300x300.jpg"
},
"shop_single":{
"file":"IRqSZt-600x600.jpg",
"width":600,
"height":600,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-600x600.jpg"
},
"post-thumbnail":{
"file":"IRqSZt-249x187.jpg",
"width":249,
"height":187,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-249x187.jpg"
},
"full-width-image":{
"file":"IRqSZt-1170x878.jpg",
"width":1170,
"height":878,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-1170x878.jpg"
},
"lp_bi_image":{
"file":"IRqSZt-750x350.jpg",
"width":750,
"height":350,
"mime-type":"image\/jpeg",
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt-750x350.jpg"
}
},
"image_meta":{
"aperture":"0",
"credit":"",
"camera":"",
"caption":"",
"created_timestamp":"0",
"copyright":"",
"focal_length":"0",
"iso":"0",
"shutter_speed":"0",
"title":"",
"orientation":"0",
"keywords":[
],
"resized_images":[
"370x200",
"54x54",
"460x260",
"370x240"
]
}
},
"post":2267,
"source_url":"https:\/\/www.example.com\/files\/2017\/02\/IRqSZt.jpg"
},
"_links":{
"self":[
{
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/posts\/2304"
}
],
"collection":[
{
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/posts"
}
],
"about":[
{
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/types\/post"
}
],
"author":[
{
"embeddable":true,
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/users\/22"
}
],
"replies":[
{
"embeddable":true,
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/comments?post=2304"
}
],
"version-history":[
{
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/posts\/2304\/revisions"
}
],
"wp:featuredmedia":[
{
"embeddable":true,
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/media\/2268"
}
],
"wp:attachment":[
{
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/media?parent=2304"
}
],
"wp:term":[
{
"taxonomy":"category",
"embeddable":true,
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/categories?post=2304"
},
{
"taxonomy":"post_tag",
"embeddable":true,
"href":"https:\/\/www.example.com\/wp-json\/wp\/v2\/tags?post=2304"
}
],
"curies":[
{
"name":"wp",
"href":"https:\/\/api.w.org\/{rel}",
"templated":true
}
]
}
},
