0

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.

Improve this question
6
  • 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: developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS Commented Jan 17, 2016 at 23:55
  • It is a different website. How can I solve it? Thanks! Commented Jan 18, 2016 at 0:07
  • 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". Commented Jan 18, 2016 at 0:36
  • Another option is Yahoo YQL, but that might not be ethically correct. Commented Jan 18, 2016 at 0: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: stackoverflow.com/questions/11916780/changing-getjson-to-jsonp Commented Jan 18, 2016 at 0:56

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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: stackoverflow.com/questions/11916780/changing-getjson-to-jsonp
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

Improve this answer

2 Comments

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.
I am the owner of both websites. How can I enable or disable JSON permissions?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.