loadJSON() function error message

p5.js Coding Questions
#1

I’m a newbie to p5.js but I’ve been playing around with using API’s. Whenever I call an API using the function loadJSON(), no matter what I always get the same error message that reads:

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

I made sure to type the URL for the API with my key but it never works, even for an API that doesn’t require a key. So something like this:

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

function gotData(data) {
  console.log(data);
}

function draw() {
  //background(220);
}

Doesn’t print, or in this case logs the array. Any ideas??

#2

Did you try http://api.open-notify.org/astros.json

without the s ?

#3

Yep. I figured adding it would help but it didn’t. :cry:

1 Like
#4

Is this solved? I loaded it without the s

#5

Screen Shot 2021-02-17 at 17.59.07
Screen Shot 2021-02-17 at 17.59.071070×720 51.3 KB

Still nothing, unfortunately.

#6

Hi,

I tested this on the p5 web editor.

If you look at the console output by pressing F12, this is the error message on Firefox :

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed

What is strange is that they say that it is not related to CORS policy and it works when putting the single link in a new browser tab…

I also tested this on a separate html file :

const request = new XMLHttpRequest();

request.open('GET', "http://api.open-notify.org/astros.json");
request.responseType = 'json';
request.send();

request.onload = function() {
  console.log(request.response);
}

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.open-notify.org/astros.json. (Reason: CORS request did not succeed).

I don’t understand why some public API doesn’t support CORS because otherwise no one can make request to their API from a browser…

It doesn’t work so I would contact the author of the API :wink:

Another link that can help you to understand the issue :

#7

This is something different but what is the explanation of the following code not looping through an array of a JSON file:

https://editor.p5js.org/eunieceharris/sketches/c0B0iuO9k

#8
#9

Sorry, I don’t know about p5.js but this processing code (JAVA flavor) works:

JSONArray citiesJSONArray; 
String stringCityName;

void setup() {
  size(400, 400);
  citiesJSONArray = loadJSONArray("c1.json");

  for (int x = 0; x < citiesJSONArray.size(); x++) {

    JSONObject oneCityJSONObject = citiesJSONArray.getJSONObject(x); 

    stringCityName = oneCityJSONObject.getString("city");
    println(stringCityName) ;
    // createP(se);
  }
}

void draw() {
  background(120);
  text ("See Direct Window", 44, 44);
}
//

Chrisir