get json data from external url with jquery

Question

I have a simple 2 fields external json url.

it has 2 fields: identifier and description

Here is the code I'm trying to use to get the description from it:

jQuery("#get_json").click(function(event){
   jQuery.getJSON('http://ec.europa.eu/research/participants/portal/data/call/topics/einfra-11-2016.json?callback=?', function(jd) {
      alert(jd.description);
   });
});

But it gives me an error in the browser console: SyntaxError: Unexpected token ':'. Parse error. SyntaxError: Unexpected token ':'. Parse error.

Can someone please give me a hint what I'm doing wrong? Thank you

Answer 1

Try this one.

 $(function() { var url = "http://cors.io/?u=http://ec.europa.eu/research/participants/portal/data/call/topics/einfra-11-2016.json"; $.getJSON(url, function(jd) { $("#description").html(jd.description) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="description"></div> 

Answer 2

The problem is that you try to load JSON from a different domain. This is per default forbidden to avoid XSS-Attacks.

You need to adjust the Access-Control-Allow-Origin policy or to switch to JSONP to be able to load the data.

Further information with examples on: https://www.sitepoint.com/jsonp-examples/