# How do I load multiple JSON urls?

**URL:** <https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150>\
**Category:** Coding Questions\
**Created:** [December 1, 2018, 6:18pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150 "2018-12-01T18:18:29Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![salazarspanish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/salazarspanish/32/2598_2.png) [@salazarspanish](https://discourse.processing.org/u/salazarspanish)\
**Post date:** [December 1, 2018, 6:18pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/1 "2018-12-01T18:18:29Z")

</div>

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:

```auto
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!

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 2, 2018, 4:34pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/2 "2018-12-02T16:34:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![salazarspanish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/salazarspanish/32/2598_2.png) [@salazarspanish](https://discourse.processing.org/u/salazarspanish)\
**Post date:** [December 4, 2018, 6:16pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/3 "2018-12-04T18:16:31Z")

</div>

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.

```auto
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));
				}
			}
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 5, 2018, 12:09pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/4 "2018-12-05T12:09:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![salazarspanish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/salazarspanish/32/2598_2.png) [@salazarspanish](https://discourse.processing.org/u/salazarspanish)\
**Post date:** [December 5, 2018, 1:58pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/5 "2018-12-05T13:58:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 5, 2018, 2:29pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/6 "2018-12-05T14:29:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![salazarspanish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/salazarspanish/32/2598_2.png) [@salazarspanish](https://discourse.processing.org/u/salazarspanish)\
**Post date:** [December 5, 2018, 3:19pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/7 "2018-12-05T15:19:53Z")

</div>

What do you mean by the updated version?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 5, 2018, 3:29pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/8 "2018-12-05T15:29:43Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![salazarspanish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/salazarspanish/32/2598_2.png) [@salazarspanish](https://discourse.processing.org/u/salazarspanish)\
**Post date:** [December 5, 2018, 3:42pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/9 "2018-12-05T15:42:23Z")

</div>

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

```auto
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));
				}
			}
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 5, 2018, 4:11pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/10 "2018-12-05T16:11:37Z")

</div>

Hi 🙂

# 1

You can delete

```auto
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

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

```

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

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

```

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

# 2

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

```

and

```auto
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:

```auto
		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.

---

<div class="post-metadata">

**Author:** ![salazarspanish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/salazarspanish/32/2598_2.png) [@salazarspanish](https://discourse.processing.org/u/salazarspanish)\
**Post date:** [December 5, 2018, 4:52pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/11 "2018-12-05T16:52:07Z")

</div>

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:

```auto
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:

```auto
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));
				}
			}
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 5, 2018, 5:08pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/12 "2018-12-05T17:08:00Z")

</div>

Getting there 🙂

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:

```auto
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

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

```

you would have

```auto
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`:

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

```

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

---

<div class="post-metadata">

**Author:** ![salazarspanish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/salazarspanish/32/2598_2.png) [@salazarspanish](https://discourse.processing.org/u/salazarspanish)\
**Post date:** [December 5, 2018, 5:26pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/13 "2018-12-05T17:26:26Z")

</div>

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

```auto
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:

```auto
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));
				}
			}
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 5, 2018, 5:33pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/14 "2018-12-05T17:33:57Z")

</div>

`Hello` should not have this if-statement

> [@salazarspanish](#):
>
> if (filesLoaded == 8) {

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.

---

<div class="post-metadata">

**Author:** ![salazarspanish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/salazarspanish/32/2598_2.png) [@salazarspanish](https://discourse.processing.org/u/salazarspanish)\
**Post date:** [December 5, 2018, 5:39pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/15 "2018-12-05T17:39:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 5, 2018, 6:45pm UTC](https://discourse.processing.org/t/how-do-i-load-multiple-json-urls/6150/16 "2018-12-05T18:45:47Z")

</div>

> **[Multi JSON Loading - OpenProcessing](https://www.openprocessing.org/sketch/639946)**
>
> Yahoo Weather API

```javascript
/**
 * 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]);
  }
}

```