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.

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

`console.log(jd)` and see what you are getting back from json call. — dNitro, Sep 04 '16 at 20:31
tried that, the same thing... don't understand why it gives an error as it's officially documented here - https://ec.europa.eu/research/participants/portal/desktop/en/support/apis.html#topic_description_service — Alexandru Vlas, Sep 04 '16 at 20:38
Tried to do that from my own server, it throws this error: `XMLHttpRequest cannot load http://ec.europa.eu/research/participants/portal/data/call/topics/einfra-11-2016.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '`Here was my URL`' is therefore not allowed access.` This seems to be a Same-Origin-Policy issue. Possibly helpful: http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource — jkemming, Sep 04 '16 at 20:59

huhu · Answer 1 · 2016-09-04T21:16:33.633

2

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>

edited Sep 04 '16 at 21:16

answered Sep 04 '16 at 20:55

huhu

199
1
6

Hi. I'm getting XMLHttpRequest cannot load http://ec.europa.eu/research/participants/portal/data/call/topics/einfra-11-2016.json. Origin http://www.example.com is not allowed by Access-Control-Allow-Origin. – Alexandru Vlas Sep 04 '16 at 20:58
@AlexandruVlas https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi – huhu Sep 04 '16 at 21:00
It works if I put that. But if any other site user doesn't have that he/she won't be able to see the data? :( – Alexandru Vlas Sep 04 '16 at 21:03
1

Replace the URL with : http://cors.io/?u=http://ec.europa.eu/research/participants/portal/data/call/topics/einfra-11-2016.json – huhu Sep 04 '16 at 21:11

score 0 · Answer 2 · answered Sep 04 '16 at 22:07

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/

get json data from external url with jquery

2 Answers2