How can you fetch json from an external url with javascript and/or jquery?

Question

I'm trying to get some json from this url : http://api.conceptnet.io/query?rel=/r/UsedFor&limit=3

I have a button that calls the function "jsonplz()" which is supposed to give me an alert with the fetched json.

My javascript looks something like this :

<script src="http://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script>
function jsonplz(){
        $.getJSON("http://api.conceptnet.io/query?rel=/r/UsedFor&limit=3?callback=?",function(json){
        console.log(json);
        });
}
</script>

As you can see, I'm trying to fetch is as jsonp, hence why I added " ?callback=? " at the end of the url, otherwise if I was trying to get it as json, my browser would have blocked me.

Here's the problem : it still doesn't work. I get this error on the firefox console when I call jsonplz() :

Warning : The script from “https://api.conceptnet.io/query?rel=/r/UsedFor&limit=3?callback=jQuery331030366838930478535_1646253265514&_=1646253265515” was loaded even though its MIME type (“application/json”) is not a valid JavaScript MIME type.

Error : Uncaught SyntaxError: unexpected token: ':'

Any solution to either solve this error or any other way to retrieve json from an external url without downloading additional third party software is appreciated

The answer from that URL isn't really a JSON. it sends 3 files (one HTML and 2 JS files) — medilies
– medilies, Commented Mar 2, 2022 at 20:54
@medilies — It is JSON (usually, the server does content-negotiation); that's why it doesn't work. — Quentin
– Quentin, Commented Mar 2, 2022 at 20:55
@Quentin check the network tab. The response say This is an HTML rendering of the ConceptNet API response. — medilies
– medilies, Commented Mar 2, 2022 at 20:57

Quentin · Accepted Answer · 2022-03-02 20:55:01Z

1

As you can see, I'm trying to fetch is as jsonp, hence why I added " ?callback=? " at the end of the url

The server doesn't support JSONP (and shouldn't, it is a dirty hack with security issues and we have CORS now).

Either:

Change the server to support JSONP (not recommended; see above)
Remove ?callback=? and change the server to grant your JS permission to read the data using CORS
Don't fetch the data directly from the client (e.g. proxy it through your own server).

answered Mar 2, 2022 at 20:55

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

4 Comments

Steve Over a year ago

Thank you for your answer, I would imagine I need to download a web server software, in order to allow me to change server permissions?

Quentin Over a year ago

http://api.conceptnet.io is an HTTP URL not a FILE URL so it already comes from a web server

Steve Over a year ago

Sorry if I misunderstand you, I'm obviously new to webdev, but does that mean I need the conceptnet.io servers to allow me with Access-Control-Allow-Origin * to fetch their json? Essentially, I don't have permission?

Quentin Over a year ago

Yes. The server you want your JS to get data from has to give your JS permission to access it (since it would be a security problem if your JS could make Alice's browser with Alice's credentials fetch Alice's confidential data and give it to you)

Collectives™ on Stack Overflow

How can you fetch json from an external url with javascript and/or jquery?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related