How to load data from JSON file through URL in p5js?

Question

I am watching a youtube tutorial about loading JSON from urls and tried :

function setup() {
  loadJSON("http://api.open-notify.org/astros.json", gotData,'jsonp');
}

function gotData(data)
{
  for(var i = 0; i<data.number;i++)
    print(data.people[i].name);
}

I am getting error :

*p5.js says: It looks like there was a problem loading your JSON file. Try checking if the file path (http://api.open-notify.org/astros.json) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server) *

What is the problem ?

juzraai · Answer 1 · 2020-08-31T05:45:36.387

1

According to the third argument ('jsonp') in your loadJSON call, you are trying to load astros.json as a JSONP resource.

However, astros.json is a simple JSON, not JSONP.

{"number": 3, "people": [{"craft": "ISS", "name": "Chris Cassidy"}, {"craft": "ISS", "name": "Anatoly Ivanishin"}, {"craft": "ISS", "name": "Ivan Vagner"}], "message": "success"}

Also, data type must precede the callback, and is also optional, according to loadJSON's documentation:

loadJSON(path, [jsonpOptions], [datatype], [callback], [errorCallback])

loadJSON(path, datatype, [callback], [errorCallback])

loadJSON(path, callback, [errorCallback])

So try with the value 'json':

loadJSON("http://api.open-notify.org/astros.json", 'json', gotData);

Or just without it:

loadJSON("http://api.open-notify.org/astros.json", gotData);

edited Aug 31 '20 at 05:45

answered Aug 31 '20 at 05:39

juzraai

5,693
8
33
47

1

thanks man. I tried with only url and callback : loadJSON("url",gotData) but it didn't work. I tried what you suggessted: loadJSON("url",'json', gotData) . But, that didn't work either. – elL Aug 31 '20 at 07:31
When something doesn't work, please add details. Does "not working" entail an error? If so, which one? If not what behavior did you observe, specifically? – ggorlen Feb 08 '22 at 21:53

score 0 · Answer 2 · answered Dec 25 '20 at 01:17

I copy and paste your code and at least for me is working fine. there is no error and i can see the content/data in the console of the browser (google chrome).

In a sketch of mine I was getting the same error message that you described, but reading around i found that in my json adress it was written "https://", and it should be "http://" with no "s". And that fixed my problem.

An other question it would be: are you using a local host? Internet browsers are always improving in safety, and that could the cause of the error.

Maybe you should try this code in the p5 editor and see if you get the same result.

score 0 · Answer 3 · answered Dec 25 '20 at 02:51

With or without the jsonp argument your code works, but you need to run it on a local web server.

Daniel Shiffman has a detailed p5.js local web server video tutorial.

Additionally, you can install p5.js mode for Processing which will launch a local web server for you using the Processing IDE

Press the Java (and down arrow) button on the right hand side of a Processing sketch window
Press Add Mode...
Select the p5.js Mode by Fathom Information Design and press Install

Once it's installed you can paste your code in a new p5.js mode Processing sketch and run it. This will launch a local web server for you and open the page in your default browser.

(To make changes I recommend pressing save in Processing then refreshing the page, as pressing run again will launch another local web server)

Alternatively you can try Sam Lavigne's p5-vscode extension for VS Code

How to load data from JSON file through URL in p5js?

3 Answers3