Parse image url from JSON api

Question

I am having problems getting an image URL from a Wordpress JSON API and fill in an image tag.

Here's my non-working code:

$(document).ready(function() {
   $.getJSON('http://interelgroup.com/api/get_post/?post_id=4683', {format: "json"}, function(data) {    
       $('#thumb').attr("src", data.post.thumbnail_images.full.url);
  });
});

And the HTML is like:

<img id="thumb" src="#">

What am I doing wrong? Help appreciated.

Thanks!

NOTE: My real case is dynamic (I am getting a dynamic list of post IDs and looping through them with $.each()), but for this case I am providing an example with an hardcoded post ID, so you can check the JSON returned.

Is `http://interelgroup.com/` your site as well? If it's not your site, you might be hitting an HTTP Access Control security restriction. More info here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — Patrick D'appollonio, Jan 17 '16 at 23:55
You can't using Javascript. Those measures are in place just because of that. What you can do is using a PHP to call the other website in your behalf, so you can later on query it to your "local copy". — Patrick D'appollonio, Jan 18 '16 at 00:36
Another option is [Yahoo YQL](https://developer.yahoo.com/yql/console/), but that might not be ethically correct. — Patrick D'appollonio, Jan 18 '16 at 00:37
Actually found out that JSONP solves the problem. Just need to add a callback parameter and specify it is a JSONP, like: `http://interelgroup.com/api/get_post/?post_id=4683&callback=?', {format: "jsonp"}`. More info here: http://stackoverflow.com/questions/11916780/changing-getjson-to-jsonp — rjpedrosa, Jan 18 '16 at 00:56
Check [this website](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) in the "The HTTP response headers". You should return the header with the only domain you want to have real access to the information provided by the API. — Patrick D'appollonio, Jan 19 '16 at 17:42

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Your problem is because you can't do cross request using Javascript, say websiteA.com wants to fetch information from websiteB.com with a plain XMLHttpRequest. That's forbidden by the Access Control.

A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which served itself. For example, an HTML page served from http://domain-a.com makes an <img> src request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.

If you know the owner of the website you're trying to read, what you can do is asking them to add your domain to the whitelist in the page headers. If you do so, then you can do as much as $.getJSON as you want.

Another alternative could be using some sort of backend code to read that website and serve it locally. Say your website is example.com, you could have a PHP script that runs on example.com/retrieve.php where you can query that website, adding the "parameter" you need. After that, since example.com is your own website you can just do a $.getJSON to yourself. There's a simple PHP proxy you can use here with a bit of explanation on why you can do it this way.

A third option would be editing the Javascript code to use Yahoo! YQL service. Although there's no guarantee that'll work forever, you can use it to query the website on your behalf and then use it to print whatever you want to the screen. The downside is that this maybe is not ethically correct if you do not own the website you're trying to fetch (plus, they can add a robots.txt file preventing the access).

Hope that helps.

Actually found out that JSONP solves the problem. Just need to add a callback parameter and specify it is a JSONP, like: `http://interelgroup.com/api/get_post/?post_id=4683&callback=?', {format: "jsonp"}`. More info here: http://stackoverflow.com/questions/11916780/changing-getjson-to-jsonp — rjpedrosa, Jan 18 '16 at 00:57

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

JSONP solves the problem. Just need to add a callback parameter and specify it is a JSONP, like:

$(document).ready(function() {
   $.getJSON('http://interelgroup.com/api/get_post/?post_id=4683&callback=?', {format: "jsonp"}, function(data) { 
       $('#thumb').attr("src", data.post.thumbnail_images.full.url);
  });
});

More info here: Changing getJSON to JSONP

Info on JSONP: https://en.wikipedia.org/wiki/JSONP

edited May 23 '17 at 12:31

Community

1
1

answered Jan 18 '16 at 01:00

rjpedrosa

652
2
7
10

That could solve your problem temporarily, but it's up to the website owner of `interelgroup.com` to keep JSONP enabled. If he disables it anytime, your script won't work anymore. – Patrick D'appollonio Jan 18 '16 at 04:33
I am the owner of both websites. How can I enable or disable JSON permissions? – rjpedrosa Jan 19 '16 at 00:38

Parse image url from JSON api

2 Answers2