Newbie question: can't load JSON with url

p5.js Coding Questions
1

Hi

I manage to solve all of the problems i encountered on my own, by reading reference page, googling, by watching yt tutorials… but i have problem with loading JSON with url which is not working even thought I done everything by the book…

Here is the code, the simplest possible - and it’s not working:

function setup() {
 var url = 'http://api.open-notify.org/iss-now.json';
 loadJSON(url, gotData, 'jsonp');
}

function gotData (data) {
print (data.iss_position.latitude);
}

It’s not working with or without “jsonp” argument.

If i put the json content in local file called iss.json, than it’s working.

function setup() {
  // createCanvas (600,400);
 var url = 'iss.json';
 loadJSON(url, gotData);
}

function gotData (data) {
print (data.iss_position.latitude);
}

The same is with open weather API, it’s not retrieving the data.

But earthquake.usgs.gov from reference loadJSON example is working just fine…

Ty for any information.
Best regards

2

The code you put is working for me, it might be a network issue. Try going to http://api.open-notify.org/iss-now.json in your browser, does it load?

3

sorry, i play also first time with this,
and i use win7, processing 3.4 mode Java

JSONObject json,jposition;
String url = "http://api.open-notify.org/iss-now.json";
int cols;
float lat,lng;

void setup() {
  json = loadJSONObject(url);
  cols = json.size();
  println("cols: "+cols);  
  println(json);
  jposition = json.getJSONObject("iss_position");
  println(jposition);
  lat = jposition.getFloat("latitude");
  lng = jposition.getFloat("longitude");
  println("lat: "+lat+" lng: "+lng);
  //println("https://www.google.com/maps/@"+lat+","+lng+",3z");
  println("https://www.google.com/maps/@"+lat+","+lng+",3224132m/data=!3m1!1e3");

}

but using the CALLBACK ? 'jsonp"
i read the url is

http://api.open-notify.org/iss-now.json?callback=CALLBACK

and the result is

CALLBACK({"timestamp": 1542545841, "iss_position": {"latitude": "-37.2571", "longitude": "40.6357"}, "message": "success"})
4
5

Hi! I can open the json in browser without a problem. I now figured out use of console (i use p5.js web editor)… so i find out that i am getting errors:

Mixed Content: The page at 'https://editor.p5js.org/Ivanko/sketches/rJ7nG9R6X' was loaded over HTTPS, but requested an insecure resource 'http://api.open-notify.org/iss-now.json'. This request has been blocked; the content must be served over HTTPS.
VM111 about:srcdoc:1 Uncaught (in promise) TypeError: Failed to fetch
VM111 about:srcdoc:1 Uncaught (in promise) TypeError: Failed to fetch

Regarding the first error, if i put https://api.open-notify.org/iss-now.json in browser, with https not with http, i get blank page, so i must use http in url, but why am i getting that error then.

And for the second… well, googling doesn’t really help with my limited knowledge

6

I think it can’t be reached because http://api.open-notify.org/iss-now.json is not secure, so the p5.js online editor won’t allow it.

If you use a normal p5.js sketch, or in the p5.js online editor go to File > Download, then click on index.html, does it work?

3 Likes
7

in processing 3.4 mode p5.js
( system: win7 browser: firefox 63 )

var data, lat, lng, googlemap="";

function setup() {
  createCanvas (500, 500);
  var url = 'http://api.open-notify.org/iss-now.json';
  loadJSON(url,gotData);
}

function draw() {
  background(200,200,0);
  stroke(0);fill(0);
  text(" lat " + lat + " lng " + lng,20,20);
  text(googlemap,20,40);
}

function gotData (data) {
  //print (data);
  lat = data.iss_position.latitude;
  lng = data.iss_position.longitude;
  googlemap = "https://www.google.com/maps/@"+nf(lat,1,7)+","+nf(lng,1,7)+",3224132m/data=!3m1!1e3";
  print(googlemap);
}

works, so it is definitely a “p5.js online editor” problem
but i do not know how to produce a link on the canvas

8

Yeah. It works when downloaded.
I will also use processing desktop app with p5.js mode in combination with web editor in the future.

Thanks!