I've been working on the p5js library and i'm trying to use an API to get access to weather data for my project, but the editor keeps throwing an error and I don't know why Here's my code:
function setup() {
createCanvas(400,400);
let url = 'http://api.openweathermap.org/data/2.5/weather?q=London&appid=e7402cc176aacd446829a856f2723b57&units=metric'
loadJSON(url,gotData)
}
function gotData(data){
print(data);
}
function draw(){
}
Can someone help point out what's wrong with my code?
You should post the errors you're getting. (Since you were already using the p5.js editor you could also share a link so it's easier to for everyone else to replicate your issue)
I've just tried your code in the p5 web editor and I'm getting this error in the browser's JS Console:
p5.js:84555 Mixed Content: The page at 'https://editor.p5js.org/' was loaded over HTTPS, but requested an insecure resource 'http://api.openweathermap.org/data/2.5/weather?q=London&appid=e7402cc176aacd446829a856f2723b57&units=metric'. This request has been blocked; the content must be served over HTTPS.
Sometimes errors can be cryptic, but in this case it's pretty straight forward:
https://editor.p5js.org)http://api.openweathermap.org/...etc.)This is makes the solution as simple as adding a single 's' :)
(from http:// to https:// when accessing the Weather API)
function setup() {
createCanvas(400,400);
let url = 'https://api.openweathermap.org/data/2.5/weather?q=London&appid=e7402cc176aacd446829a856f2723b57&units=metric'
loadJSON(url,gotData)
}
function gotData(data){
print(data);
}
function draw(){
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>