CODEWITHSUNDEEP
javascriptjsonprocessingp5.js
elL
elL

Reputation: 19

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

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 ?

Upvotes: 1

Views: 1546

Answers (3)

George Profenza
George Profenza

Reputation: 51837

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

  1. Press the Java (and down arrow) button on the right hand side of a Processing sketch window
  2. Press Add Mode...
  3. 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)

enter image description here

enter image description here

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

Upvotes: 0

Taruand&#233; Biota
Taruand&#233; Biota

Reputation: 33

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.

Upvotes: 0

juzraai
juzraai

Reputation: 5943

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);

Upvotes: 1

Related Questions