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
– dNitro, Commented Sep 4, 2016 at 20:31
tried that, the same thing... don't understand why it gives an error as it's officially documented here - ec.europa.eu/research/participants/portal/desktop/en/support/… — Alexandru Vlas
– Alexandru Vlas, Commented Sep 4, 2016 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: stackoverflow.com/questions/20035101/… — jkemming
– jkemming, Commented Sep 4, 2016 at 20:59

huhu · Accepted Answer · 2016-09-04 21:16:33Z

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 4, 2016 at 21:16

answered Sep 4, 2016 at 20:55

huhu

1991 silver badge6 bronze badges

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

4 Comments

Alexandru Vlas Over a year ago

Hi. I'm getting XMLHttpRequest cannot load ec.europa.eu/research/participants/portal/data/call/topics/…. Origin example.com is not allowed by Access-Control-Allow-Origin.

huhu Over a year ago

@AlexandruVlas chrome.google.com/webstore/detail/allow-control-allow-origi/…

Alexandru Vlas Over a year ago

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? :(

huhu Over a year ago

Replace the URL with : cors.io/?u=http://ec.europa.eu/research/participants/portal/…

Michael Walter · Accepted Answer · 2016-09-04 22:07:26Z

0

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/

answered Sep 4, 2016 at 22:07

Michael Walter

1,47713 silver badges28 bronze badges

Collectives™ on Stack Overflow

get json data from external url with jquery

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related