How do I load multiple JSON urls?

p5.js Coding Questions
1

Hello! I was able to load one JSON url from Yahoo Weather, but now I am having trouble loading multiple urls. I tried searching my question on stack overflow, but the posts I found mentioned one JSON url, not several. Also, I tried applying Daniel Shiffman’s tutorial to multiple urls, but I am still doing something wrong in the code. First, I had my loadJSON commands in preload, not setup, which I thought was the problem. Another problem might be how I define and use dataAll, which is a variable that includes all my data sets. How can I load multiple JSON urls correctly? Here is the relevant code:

var balls = []; // array of Jitter objects
var dataChicago;
var dataAurora;
var dataJoliet;
var dataNaperville;
var dataRockford;
var dataSpringfield;
var dataElgin;
var dataPeoria;
var dataAll = dataChicago, dataAurora, dataJoliet, dataNaperville, dataRockford, dataSpringfield, dataElgin, dataPeoria;
var dates = [];	// an array of all the "date" values
var texts = []; // an array of all the "text" values
var temps = []; // an array of all the "high" values
var chicagoData;
var auroraData;
var jolietData;
var napervilleData;
var rockfordData;
var springfieldData;
var elginData;
var peoriaData;
var allData = chicagoData, auroraData, jolietData, napervilleData, rockfordData, springfieldData, elginData, peoriaData;

function setup() {
	createCanvas(windowWidth, windowHeight);
	var urlchicago = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22chicago%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlaurora = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22aurora%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urljoliet = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22joliet%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlnaperville = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22naperville%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlrockford = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22rockford%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlspringfield = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22springfield%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlelgin = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22elgin%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlpeoria = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22peoria%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	loadJSON(urlchicago, gotData, 'jsonp');
	loadJSON(urlaurora, gotData, 'jsonp');
	loadJSON(urljoliet, gotData, 'jsonp');
	loadJSON(urlnaperville, gotData, 'jsonp');
	loadJSON(urlrockford, gotData, 'jsonp');
	loadJSON(urlspringfield, gotData, 'jsonp');
	loadJSON(urlelgin, gotData, 'jsonp');
	loadJSON(urlpeoria, gotData, 'jsonp');

	noStroke();
	for (var i=0; i<10; i++) {
		balls.push(new Hello());
	}
}

function gotData(dataChicago) {
	chicagoData = dataChicago;
	//console.log(data);
}

function gotData(dataAurora) {
	auroraData = dataAurora;
}

function gotData(dataJoliet) {
	jolietData = dataJoliet;
}

function gotData(dataNaperville) {
	napervilleData = dataNaperville;
}

function gotData(dataRockford) {
	rockfordData = dataRockford;
}

function gotData(dataSpringfield) {
	springfieldData = dataSpringfield;
}

function gotData(dataElgin) {
	elginData = dataElgin;
}

function gotData(dataPeoria) {
	peoriaData = dataPeoria;
}

function gotData(dataAll) {
	allData = dataAll;
}

function draw() {
  background(66, 223, 244, 230);
	if (allData) {
		var allData = dataAll.query.results.channel.item.forecast;
		for (var i=0; i<allData.length; i++) {
			dates[i] = allData[i].date;
		  texts[i] = allData[i].text;
		  temps[i] = allData[i].high;
		  balls[i].move(temps[i]);
		  balls[i].display(temps[i], dates[i]);
		}
	}
}

Thanks in advance!

1 Like
2

Hi, at least one problem is that you have many functions with the same name. They are all called gotData, so the last gotData you declare overwrites previous ones. Only one gotData function can exist.

I would replace gotData with different names like gotChicagoData, gotAuroraData, etc. and then see if there are other issues.

1 Like
3

Thanks for the reply! I replaced everything like you said: I changed gotData to gotChicagoData, and did this for every dataset. This didn’t work, so it seems there might be another problem. In the following code under “function Hello() {” , I inserted an "if (allData) { " , which wasn’t there before. This still didn’t help. Here’s the rest of my code, which includes my “Hello” that I use in “setup”. In the meantime, I’ll try some troubleshooting to see if I can fix the problem.

function Hello() {
	if (allData) {
		this.direction = 1;
	  this.x = random(0, 200);
		this.diameter = random(10, 30);
		this.speed2 = 2;
		this.speed3 = 20;

	  this.move = function(speedVar, colorVar, temps) {
	    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
			this.y = map(colorVar, min(temps), max(temps), 50, height-50);
			this.y += random(-this.speed2, this.speed2);
	    this.x += this.speed
			if(this.x < 0 || this.x > width)
				this.direction = -this.direction;
	  }

	  this.display = function(colorVar, date) {
	    this.temp = map(colorVar, min(temps), max(temps), 10, 100);

	    var colorVal = map(colorVar, min(temps), max(temps), 10, 255);
	    tempColor = color(colorVal, 100, 255-colorVal);
	   	fill(tempColor);

	   	this.y = map(colorVar, min(temps), max(temps), 50, height-50);
			this.y += random(-this.speed2, this.speed2);

			if (mouseY > this.y-(this.temp/2) && mouseY < this.y+(this.temp/2)) {
				this.move = function(speedVar) {
			    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
			    this.x += this.speed
					if(this.x < 0 || this.x > width)
						this.direction = -this.direction;
			  }

				this.y = map(colorVar, min(temps), max(temps), 50, height-50);
					text(date, this.temp/2+mouseX, this.y);
					ellipse(mouseX, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));

			} else {
				if (mouseIsPressed) {
					this.move = function(speedVar, colorVar, temps) {
				    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
						this.y = map(colorVar, min(temps), max(temps), 50, height-50);
						this.y += random(-this.speed2, this.speed2);
				    this.x += this.speed
						if(this.x < 0 || this.x > width)
							this.direction = -this.direction;
				  }
					this.display = function(colorVar, date) {
						this.temp = map(colorVar, min(temps), max(temps), 10, 100);

						var colorVal = map(colorVar, min(temps), max(temps), 10, 255);
						tempColor = color(colorVal, 100, 255-colorVal);
						fill(tempColor);

						this.y = map(colorVar, min(temps), max(temps), 50, height-50);
						this.y += random(-this.speed3, this.speed3);
							ellipse(this.x, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));
					}
				} else {
				  this.y = map(colorVar, min(temps), max(temps), 50, height-50);
					this.y += random(-this.speed2, this.speed2);
						ellipse(this.x, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));
				}
			}
		}
	}
}
4

Could you describe in which way it is failing to work?

5

It’s supposed to display balls bouncing back and forth (horizontally). The balls’ color, position, and speed are mapped to temperature data. The lowest ball (vertically) is the warmest temp, and the highest is the coldest temp. When I hover over the ball, it should stop and display the date. I was able to do this with one JSON file (not a url), but now I want to do the same thing with several JSON urls. Right now, the code is just giving me the background color, which is blue. None of the balls are being drawn. Does that make sense?
Thanks for your help so far

6

Without seeing the program in its current state it’s hard to say know what’s going on. Could you share the updated version?

7

What do you mean by the updated version?

8

I believe you renamed functions but didn’t share that code, right? To make it easy for anyone to test your code, it should be available here so they can copy/paste/run. If people need to to carefully read the whole thread and re-implement changes you did to the code to be on the same page as you then it’s less likely that anyone can help :slight_smile:

9

Oh, of course! Sorry about that. Here it is:

var balls = []; // array of Jitter objects
var dataChicago;
var dataAurora;
var dataJoliet;
var dataNaperville;
var dataRockford;
var dataSpringfield;
var dataElgin;
var dataPeoria;
var dataAll = dataChicago, dataAurora, dataJoliet, dataNaperville, dataRockford, dataSpringfield, dataElgin, dataPeoria;
var dates = [];	// an array of all the "date" values
var texts = []; // an array of all the "text" values
var temps = []; // an array of all the "high" values
var chicagoData;
var auroraData;
var jolietData;
var napervilleData;
var rockfordData;
var springfieldData;
var elginData;
var peoriaData;
var allData = chicagoData, auroraData, jolietData, napervilleData, rockfordData, springfieldData, elginData, peoriaData;

function setup() {
	createCanvas(windowWidth, windowHeight);
	var urlchicago = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22chicago%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlaurora = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22aurora%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urljoliet = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22joliet%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlnaperville = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22naperville%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlrockford = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22rockford%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlspringfield = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22springfield%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlelgin = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22elgin%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlpeoria = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22peoria%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	loadJSON(urlchicago, gotChicagoData, 'jsonp');
	loadJSON(urlaurora, gotAuroraData, 'jsonp');
	loadJSON(urljoliet, gotJolietData, 'jsonp');
	loadJSON(urlnaperville, gotNapervilleData, 'jsonp');
	loadJSON(urlrockford, gotRockfordData, 'jsonp');
	loadJSON(urlspringfield, gotSpringfieldData, 'jsonp');
	loadJSON(urlelgin, gotElginData, 'jsonp');
	loadJSON(urlpeoria, gotPeoriaData, 'jsonp');

	noStroke();
	for (var i=0; i<10; i++) {
		balls.push(new Hello());
	}
}

function gotChicagoData(dataChicago) {
	chicagoData = dataChicago;
	//console.log(data);
}

function gotAuroraData(dataAurora) {
	auroraData = dataAurora;
}

function gotJolietData(dataJoliet) {
	jolietData = dataJoliet;
}

function gotNapervilleData(dataNaperville) {
	napervilleData = dataNaperville;
}

function gotRockfordData(dataRockford) {
	rockfordData = dataRockford;
}

function gotSpringfieldData(dataSpringfield) {
	springfieldData = dataSpringfield;
}

function gotElginData(dataElgin) {
	elginData = dataElgin;
}

function gotPeoriaData(dataPeoria) {
	peoriaData = dataPeoria;
}

function gotAllData(dataAll) {
	allData = dataAll;
}

function draw() {
  background(66, 223, 244, 230);
	if (allData) {
		var allData = dataAll.query.results.channel.item.forecast;
		for (var i=0; i<allData.length; i++) {
			dates[i] = allData[i].date;
		  texts[i] = allData[i].text;
		  temps[i] = allData[i].high;
		  balls[i].move(temps[i]);
		  balls[i].display(temps[i], dates[i]);
		}
	}
}

function Hello() {
	if (allData) {
		this.direction = 1;
	  this.x = random(0, 200);
		this.diameter = random(10, 30);
		this.speed2 = 2;
		this.speed3 = 20;

	  this.move = function(speedVar, colorVar, temps) {
	    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
			this.y = map(colorVar, min(temps), max(temps), 50, height-50);
			this.y += random(-this.speed2, this.speed2);
	    this.x += this.speed
			if(this.x < 0 || this.x > width)
				this.direction = -this.direction;
	  }

	  this.display = function(colorVar, date) {
	    this.temp = map(colorVar, min(temps), max(temps), 10, 100);

	    var colorVal = map(colorVar, min(temps), max(temps), 10, 255);
	    tempColor = color(colorVal, 100, 255-colorVal);
	   	fill(tempColor);

	   	this.y = map(colorVar, min(temps), max(temps), 50, height-50);
			this.y += random(-this.speed2, this.speed2);

			if (mouseY > this.y-(this.temp/2) && mouseY < this.y+(this.temp/2)) {
				this.move = function(speedVar) {
			    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
			    this.x += this.speed
					if(this.x < 0 || this.x > width)
						this.direction = -this.direction;
			  }

				this.y = map(colorVar, min(temps), max(temps), 50, height-50);
					text(date, this.temp/2+mouseX, this.y);
					ellipse(mouseX, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));

			} else {
				if (mouseIsPressed) {
					this.move = function(speedVar, colorVar, temps) {
				    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
						this.y = map(colorVar, min(temps), max(temps), 50, height-50);
						this.y += random(-this.speed2, this.speed2);
				    this.x += this.speed
						if(this.x < 0 || this.x > width)
							this.direction = -this.direction;
				  }
					this.display = function(colorVar, date) {
						this.temp = map(colorVar, min(temps), max(temps), 10, 100);

						var colorVal = map(colorVar, min(temps), max(temps), 10, 255);
						tempColor = color(colorVal, 100, 255-colorVal);
						fill(tempColor);

						this.y = map(colorVar, min(temps), max(temps), 50, height-50);
						this.y += random(-this.speed3, this.speed3);
							ellipse(this.x, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));
					}
				} else {
				  this.y = map(colorVar, min(temps), max(temps), 50, height-50);
					this.y += random(-this.speed2, this.speed2);
						ellipse(this.x, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));
				}
			}
		}
	}
}
10

Hi :slight_smile:

1

You can delete

var dataChicago;
var dataAurora;
var dataJoliet;
var dataNaperville;
var dataRockford;
var dataSpringfield;
var dataElgin;
var dataPeoria;

from the top. Those global variables are not needed, and not used anywhere. When you do something like

function gotChicagoData(dataChicago) {
	chicagoData = dataChicago;
	//console.log(data);
}

that dataChicago is a local variable, and it could be called anything. For instance:

function gotChicagoData(data) {
	chicagoData = data;
	//console.log(data);
}

And it can be called data in other functions too, because it’s local.

2

var dataAll = dataChicago, dataAurora, dataJoliet, dataNaperville, dataRockford, dataSpringfield, dataElgin, dataPeoria;

and

var allData = chicagoData, auroraData, jolietData, napervilleData, rockfordData, springfieldData, elginData, peoriaData;

does’t make sense. You can not just write that one variable is equal to many variables. So you can get rid of those two lines.

3

A way to know if all your files are loaded might be this. Create a global

var filesLoaded = 0;

at the top. Then, inside each gotXxxData(data) function, add

filesLoaded++;

So you increment that variable when data is loaded. Then, instead of

if(allData) {

you could do

if(filesLoaded == 8) {

Finally, you can’t access all data through the same variable as you are trying to do here:

		var allData = dataAll.query.results.channel.item.forecast;

You have to access each location data one by one. Unless you would rewrite the project to make it array based. Then it would not matter if you are loading 2 or 15 locations (ignoring the load time of course).
Without this array oriented approach, you need to access first auroraData, then jolietData, then … etc.

It might be good to start with 2 locations first, and when that works, you try adding more.

11

Hi, I think I did everything like you said. It still doesn’t work; I’m still only getting the background color. The javascript console says the following:

Uncaught ReferenceError: data is not defined
    at draw (sketch.js:85)
    at e.d.redraw (p5.min.js:6)
    at e.<anonymous> (p5.min.js:4)

Here is the updated code:

var filesLoaded = 0;
var balls = []; // array of Jitter objects
var dates = [];	// an array of all the "date" values
var texts = []; // an array of all the "text" values
var temps = []; // an array of all the "high" values
var chicagoData;
var auroraData;
var jolietData;
var napervilleData;
var rockfordData;
var springfieldData;
var elginData;
var peoriaData;


function setup() {
	createCanvas(windowWidth, windowHeight);
	var urlchicago = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22chicago%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlaurora = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22aurora%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urljoliet = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22joliet%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlnaperville = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22naperville%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlrockford = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22rockford%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlspringfield = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22springfield%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlelgin = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22elgin%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlpeoria = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22peoria%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	loadJSON(urlchicago, gotChicagoData, 'jsonp');
	loadJSON(urlaurora, gotAuroraData, 'jsonp');
	loadJSON(urljoliet, gotJolietData, 'jsonp');
	loadJSON(urlnaperville, gotNapervilleData, 'jsonp');
	loadJSON(urlrockford, gotRockfordData, 'jsonp');
	loadJSON(urlspringfield, gotSpringfieldData, 'jsonp');
	loadJSON(urlelgin, gotElginData, 'jsonp');
	loadJSON(urlpeoria, gotPeoriaData, 'jsonp');

	noStroke();
	for (var i=0; i<10; i++) {
		balls.push(new Hello());
	}
}

function gotChicagoData(data) {
	chicagoData = data;
	filesLoaded++;
	//console.log(data);
}

function gotAuroraData(data) {
	auroraData = data;
	filesLoaded++;
}

function gotJolietData(data) {
	jolietData = data;
	filesLoaded++;
}

function gotNapervilleData(data) {
	napervilleData = data;
	filesLoaded++;
}

function gotRockfordData(data) {
	rockfordData = data;
	filesLoaded++;
}

function gotSpringfieldData(data) {
	springfieldData = data;
	filesLoaded++;
}

function gotElginData(data) {
	elginData = data;
	filesLoaded++;
}

function gotPeoriaData(data) {
	peoriaData = data;
	filesLoaded++;
}

function draw() {
  background(66, 223, 244, 230);
	if (filesLoaded == 8) {
		var chicagoData = data.query.results.channel.item.forecast;
		for (var i=0; i<chicagoData.length; i++) {
			dates[i] = chicagoData[i].date;
		  texts[i] = chicagoData[i].text;
		  temps[i] = chicagoData[i].high;
		  balls[i].move(temps[i]);
		  balls[i].display(temps[i], dates[i]);
		}
		var auroraData = data.query.results.channel.item.forecast;
		for (var i=0; i<auroraData.length; i++) {
			dates[i] = auroraData[i].date;
			texts[i] = auroraData[i].text;
			temps[i] = auroraData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		var jolietData = data.query.results.channel.item.forecast;
		for (var i=0; i<jolietData.length; i++) {
			dates[i] = jolietData[i].date;
			texts[i] = jolietData[i].text;
			temps[i] = jolietData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		var napervilleData = data.query.results.channel.item.forecast;
		for (var i=0; i<napervilleData.length; i++) {
			dates[i] = napervilleData[i].date;
			texts[i] = napervilleData[i].text;
			temps[i] = napervilleData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		var rockfordData = data.query.results.channel.item.forecast;
		for (var i=0; i<rockfordData.length; i++) {
			dates[i] = rockfordData[i].date;
			texts[i] = rockfordData[i].text;
			temps[i] = rockfordData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		var springfieldData = data.query.results.channel.item.forecast;
		for (var i=0; i<springfieldData.length; i++) {
			dates[i] = springfieldData[i].date;
			texts[i] = springfieldData[i].text;
			temps[i] = springfieldData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		var elginData = data.query.results.channel.item.forecast;
		for (var i=0; i<elginData.length; i++) {
			dates[i] = elginData[i].date;
			texts[i] = elginData[i].text;
			temps[i] = elginData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		var peoriaData = data.query.results.channel.item.forecast;
		for (var i=0; i<peoriaData.length; i++) {
			dates[i] = peoriaData[i].date;
			texts[i] = peoriaData[i].text;
			temps[i] = peoriaData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
	}
}

function Hello() {
	if (filesLoaded == 8) {
		this.direction = 1;
	  this.x = random(0, 200);
		this.diameter = random(10, 30);
		this.speed2 = 2;
		this.speed3 = 20;

	  this.move = function(speedVar, colorVar, temps) {
	    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
			this.y = map(colorVar, min(temps), max(temps), 50, height-50);
			this.y += random(-this.speed2, this.speed2);
	    this.x += this.speed
			if(this.x < 0 || this.x > width)
				this.direction = -this.direction;
	  }

	  this.display = function(colorVar, date) {
	    this.temp = map(colorVar, min(temps), max(temps), 10, 100);

	    var colorVal = map(colorVar, min(temps), max(temps), 10, 255);
	    tempColor = color(colorVal, 100, 255-colorVal);
	   	fill(tempColor);

	   	this.y = map(colorVar, min(temps), max(temps), 50, height-50);
			this.y += random(-this.speed2, this.speed2);

			if (mouseY > this.y-(this.temp/2) && mouseY < this.y+(this.temp/2)) {
				this.move = function(speedVar) {
			    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
			    this.x += this.speed
					if(this.x < 0 || this.x > width)
						this.direction = -this.direction;
			  }

				this.y = map(colorVar, min(temps), max(temps), 50, height-50);
					text(date, this.temp/2+mouseX, this.y);
					ellipse(mouseX, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));

			} else {
				if (mouseIsPressed) {
					this.move = function(speedVar, colorVar, temps) {
				    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
						this.y = map(colorVar, min(temps), max(temps), 50, height-50);
						this.y += random(-this.speed2, this.speed2);
				    this.x += this.speed
						if(this.x < 0 || this.x > width)
							this.direction = -this.direction;
				  }
					this.display = function(colorVar, date) {
						this.temp = map(colorVar, min(temps), max(temps), 10, 100);

						var colorVal = map(colorVar, min(temps), max(temps), 10, 255);
						tempColor = color(colorVal, 100, 255-colorVal);
						fill(tempColor);

						this.y = map(colorVar, min(temps), max(temps), 50, height-50);
						this.y += random(-this.speed3, this.speed3);
							ellipse(this.x, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));
					}
				} else {
				  this.y = map(colorVar, min(temps), max(temps), 50, height-50);
					this.y += random(-this.speed2, this.speed2);
						ellipse(this.x, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));
				}
			}
		}
	}
}
12

Getting there :slight_smile:

The current issue is that the data variable is not declared inside draw(), so you can not try to read from it.

Since you apparently don’t care about the whole object you are receiving from yahoo, but only part of it, what you could do is to remove all the lines that look like this:

var chicagoData = data.query.results.channel.item.forecast;

from inside draw (because data is not declared) and then add part of that code to the callback that receives the data. So instead of

function gotChicagoData(data) {
	chicagoData = data;
	filesLoaded++;
	//console.log(data);
}

you would have

function gotChicagoData(data) {
	chicagoData = data.query.results.channel.item.forecast;
	filesLoaded++;
	//console.log(data);
}

See, data DOES exist inside that function, and then you grab only the part that you are interested in. That should make chicagoData contain the things you want to visualize (I believe).

Also, if you want to see tha data being loaded, you could add this else statement after the if(filesLoaded == 8) in draw:

else {
		text(filesLoaded, 5, height - 5);
	}

That way you can see a counter (I hope) while files load. It may help debug.

13

Thanks so far, you’ve been helpful. Now the console says:

sketch.js:89 Uncaught TypeError: balls[i].move is not a function
    at draw (sketch.js:89)
    at e.d.redraw (p5.min.js:6)
    at e.<anonymous> (p5.min.js:4)

Does this mean I have to change or move balls[i].move as well?

Here is the code again:

var filesLoaded = 0;
var balls = []; // array of Jitter objects
var dates = [];	// an array of all the "date" values
var texts = []; // an array of all the "text" values
var temps = []; // an array of all the "high" values
var chicagoData;
var auroraData;
var jolietData;
var napervilleData;
var rockfordData;
var springfieldData;
var elginData;
var peoriaData;


function setup() {
	createCanvas(windowWidth, windowHeight);
	var urlchicago = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22chicago%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlaurora = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22aurora%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urljoliet = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22joliet%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlnaperville = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22naperville%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlrockford = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22rockford%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlspringfield = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22springfield%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlelgin = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22elgin%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	var urlpeoria = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22peoria%2C%20il%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
	loadJSON(urlchicago, gotChicagoData, 'jsonp');
	loadJSON(urlaurora, gotAuroraData, 'jsonp');
	loadJSON(urljoliet, gotJolietData, 'jsonp');
	loadJSON(urlnaperville, gotNapervilleData, 'jsonp');
	loadJSON(urlrockford, gotRockfordData, 'jsonp');
	loadJSON(urlspringfield, gotSpringfieldData, 'jsonp');
	loadJSON(urlelgin, gotElginData, 'jsonp');
	loadJSON(urlpeoria, gotPeoriaData, 'jsonp');

	noStroke();
	for (var i=0; i<10; i++) {
		balls.push(new Hello());
	}
}

function gotChicagoData(data) {
	chicagoData = data.query.results.channel.item.forecast;
	filesLoaded++;
	//console.log(data);
}

function gotAuroraData(data) {
	auroraData = data.query.results.channel.item.forecast;
	filesLoaded++;
}

function gotJolietData(data) {
	jolietData = data.query.results.channel.item.forecast;
	filesLoaded++;
}

function gotNapervilleData(data) {
	napervilleData = data.query.results.channel.item.forecast;
	filesLoaded++;
}

function gotRockfordData(data) {
	rockfordData = data.query.results.channel.item.forecast;
	filesLoaded++;
}

function gotSpringfieldData(data) {
	springfieldData = data.query.results.channel.item.forecast;
	filesLoaded++;
}

function gotElginData(data) {
	elginData = data.query.results.channel.item.forecast;
	filesLoaded++;
}

function gotPeoriaData(data) {
	peoriaData = data.query.results.channel.item.forecast;
	filesLoaded++;
}

function draw() {
  background(66, 223, 244, 230);
	if (filesLoaded == 8) {
		for (var i=0; i<chicagoData.length; i++) {
			dates[i] = chicagoData[i].date;
		  texts[i] = chicagoData[i].text;
		  temps[i] = chicagoData[i].high;
		  balls[i].move(temps[i]);
		  balls[i].display(temps[i], dates[i]);
		}
		for (var i=0; i<auroraData.length; i++) {
			dates[i] = auroraData[i].date;
			texts[i] = auroraData[i].text;
			temps[i] = auroraData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		for (var i=0; i<jolietData.length; i++) {
			dates[i] = jolietData[i].date;
			texts[i] = jolietData[i].text;
			temps[i] = jolietData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		for (var i=0; i<napervilleData.length; i++) {
			dates[i] = napervilleData[i].date;
			texts[i] = napervilleData[i].text;
			temps[i] = napervilleData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		for (var i=0; i<rockfordData.length; i++) {
			dates[i] = rockfordData[i].date;
			texts[i] = rockfordData[i].text;
			temps[i] = rockfordData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		for (var i=0; i<springfieldData.length; i++) {
			dates[i] = springfieldData[i].date;
			texts[i] = springfieldData[i].text;
			temps[i] = springfieldData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		for (var i=0; i<elginData.length; i++) {
			dates[i] = elginData[i].date;
			texts[i] = elginData[i].text;
			temps[i] = elginData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
		for (var i=0; i<peoriaData.length; i++) {
			dates[i] = peoriaData[i].date;
			texts[i] = peoriaData[i].text;
			temps[i] = peoriaData[i].high;
			balls[i].move(temps[i]);
			balls[i].display(temps[i], dates[i]);
		}
	} else {
		text(filesLoaded, 5, height - 5);
	}
}

function Hello() {
	if (filesLoaded == 8) {
		this.direction = 1;
	  this.x = random(0, 200);
		this.diameter = random(10, 30);
		this.speed2 = 2;
		this.speed3 = 20;

	  this.move = function(speedVar, colorVar, temps) {
	    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
			this.y = map(colorVar, min(temps), max(temps), 50, height-50);
			this.y += random(-this.speed2, this.speed2);
	    this.x += this.speed
			if(this.x < 0 || this.x > width)
				this.direction = -this.direction;
	  }

	  this.display = function(colorVar, date) {
	    this.temp = map(colorVar, min(temps), max(temps), 10, 100);

	    var colorVal = map(colorVar, min(temps), max(temps), 10, 255);
	    tempColor = color(colorVal, 100, 255-colorVal);
	   	fill(tempColor);

	   	this.y = map(colorVar, min(temps), max(temps), 50, height-50);
			this.y += random(-this.speed2, this.speed2);

			if (mouseY > this.y-(this.temp/2) && mouseY < this.y+(this.temp/2)) {
				this.move = function(speedVar) {
			    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
			    this.x += this.speed
					if(this.x < 0 || this.x > width)
						this.direction = -this.direction;
			  }

				this.y = map(colorVar, min(temps), max(temps), 50, height-50);
					text(date, this.temp/2+mouseX, this.y);
					ellipse(mouseX, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));

			} else {
				if (mouseIsPressed) {
					this.move = function(speedVar, colorVar, temps) {
				    this.speed = (map(speedVar, 55, 61, 1, 5)*this.direction);
						this.y = map(colorVar, min(temps), max(temps), 50, height-50);
						this.y += random(-this.speed2, this.speed2);
				    this.x += this.speed
						if(this.x < 0 || this.x > width)
							this.direction = -this.direction;
				  }
					this.display = function(colorVar, date) {
						this.temp = map(colorVar, min(temps), max(temps), 10, 100);

						var colorVal = map(colorVar, min(temps), max(temps), 10, 255);
						tempColor = color(colorVal, 100, 255-colorVal);
						fill(tempColor);

						this.y = map(colorVar, min(temps), max(temps), 50, height-50);
						this.y += random(-this.speed3, this.speed3);
							ellipse(this.x, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));
					}
				} else {
				  this.y = map(colorVar, min(temps), max(temps), 50, height-50);
					this.y += random(-this.speed2, this.speed2);
						ellipse(this.x, this.y, map(colorVar, min(temps), max(temps), 10, 100), map(colorVar, min(temps), max(temps), 10, 100));
				}
			}
		}
	}
}
14

Hello should not have this if-statement

otherwise all the properties and methods of the object are not created, as you call Hello before the data is loaded. That’s why iit doesn’t know what is move, because move was not created.

1 Like
15

Yes! Thank you so much, it works now:)

16 
/**
 * Multi JSON Loading (v1.0)
 * GoToLoop (2018-Dec-05)
 * https://Discourse.Processing.org/t/how-do-i-load-multiple-json-urls/6150/16
 * https://OpenProcessing.org/sketch/639946
 */

"use strict";

const HTTP = 'https://', SITE = 'Query.YahooApis.com/',
      DIR = 'v1/public/', FILE = 'yql',
      P1 = '?q=select * from weather.forecast where woeid in ',
      P2 = '(select woeid from geo.places(1) where text="',
      P3 = ', il")&format=json&env=store://datatables.org/alltableswithkeys',
      URI = HTTP + SITE + DIR + FILE + P1 + P2,
      CITIES = Object.freeze([
        'chicago', 'aurora', 'joliet', 'naperville',
        'rockford','springfield', 'elgin', 'peoria'
      ]),
      jsons = Array(CITIES.length), casts = Array(CITIES.length);

function preload() {
  for (let i = 0; i < CITIES.length; ++i)
    jsons[i] = loadJSON(URI + CITIES[i] + P3);
}

function setup() {
  grabForecasts();
  logForecasts();
}

function grabForecasts() {
  for (let i = 0; i < CITIES.length; ++i)
    casts[i] = jsons[i].query.results.channel.item.forecast;
}

function logForecasts() {
  for (let i = 0; i < CITIES.length; ++i) {
    console.info(CITIES[i] + ':');
    console.table(casts[i]);
  }
}
1 Like