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??
Chrisir
February 17, 2021, 9:29pm
2
Yep. I figured adding it would help but it didn’t.
1 Like
Chrisir
February 17, 2021, 10:56pm
4
Is this solved? I loaded it without the s
Still nothing, unfortunately.
josephh
February 18, 2021, 12:22am
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
Another link that can help you to understand the issue :
https://github.com/processing/p5.js/issues/1451
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
Chrisir
February 19, 2021, 10:09am
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