Home » JSON

JSON Arrays

JSON Array: In this tutorial, we are going to learn about the array in JSON (JavaScript Object Notation) with examples.
Submitted by Siddhant Verma, on November 14, 2019

In the previous articles, we have talked about what JSON is, why it's prevalent today, how it has popularised itself over the last decade and defeated XML in comparison? We have also broken down JSON, compared it to a typical JavaScript object and defined the various types of values we can have in JSON.

In this article, we'll have a look at JSON arrays.

{
 	'Name": 'Yoshi",
 	'LastName":"Tatsu",
 	'Age": 24,
 	'Weapons": ["Sword","Shield","Ninja blade"]
}

Remember this example from JSON Objects? Here we have a JSON array too with the key of weapons. We have a simple JSON array of strings inside.

We know that array is a primitive data structure in most languages as it is in JavaScript. Especially in JavaScript, an array is a data structure having several data values inside it, all of which are the same type. All these values have contiguous allocation of memory. In JSON, the value corresponding to a certain key can be an array of almost anything- array of strings, array of numbers or integers, array of boolean values, array of objects and array of arrays too!

Example of s simple JSON array

{
	"Names": ["Tim", "John", "Lee", "FuzzySid"]
}

And a simple JavaScript array would look like,

["Tim", "John", "Lee", "FuzzySid"]

The only difference between a normal JavaScript Array and a JSON Array is the type of values the array can possess. A JSON array can only have numbers, strings, objects or boolean values whereas a JavaScript array any valid JavaScript expression like a function, data some dates etc.

We can access a JSON array either using the index associated with it.

var pokemon={
	"name":"Squirtles",
	"type":"water",
	"HP":100,
	"isEvolved":false
}

Recall that this is a simple JSON object. Let's add some JSON array inside it.

var pokemon={
	"name":"Squirtles",
	"type":"water",
	"HP":100,
	"isEvolved":false,
	"evos":["Watertortle","Blastoise"],
	"AttackTypes":["super-attack","defense","special-defense"],
	"Weakness":["electric","grass"],
	"attacks":["Water-Gun","Rain-Splash","Bubble","Sleepy-Ball"],
	"DefensePower":[33,47,88,49]
}
pokemon;

Output

{name: "Squirtles", type: "water", HP: 100, isEvolved: false, evos: Array(2), …}
AttackTypes: (3) ["super-attack", "defense", "special-defense"]
DefensePower: (4) [33, 47, 88, 49]
HP: 100
Weakness: (2) ["electric", "grass"]
attacks: (4) ["Water-Gun", "Rain-Splash", "Bubble", "Sleepy-Ball"]
evos: (2) ["Watertortle", "Blastoise"]
isEvolved: false
name: "Squirtles"
type: "water"
__proto__: Object

Let's access the JSON arrays using the indices now.

pokemon.AttackTypes[2]

Output

"special-defense"

pokemon.AttackTypes[0]

Output

"super-attack"

pokemon.Weakness[1];

Output

"grass"

pokemon.DefensePower[3];

Output

49

We can also loop through the array either using a simple loop or using the forEach loop.

pokemon.DefensePower.forEach(def=>{
	console.log(def);
});

Output

33
47
88
49

Now if after some healthy snacks our squirtle can increase it's defense values by 25, we can see how they would look like.

pokemon.DefensePower.forEach(def=>{
	console.log(def+25);
});

Output

58
72
113
74

And say we give our squirtle this super delicious and super healthy snack. So now it's defense powers actually increase.

for(let i in pokemon.DefensePower){
	pokemon.DefensePower[i]+=25;
}
pokemon;

Output

{name: "Squirtles", type: "water", HP: 100, isEvolved: false, evos: Array(2), …}
AttackTypes: (3) ["super-attack", "defense", "special-defense"]
DefensePower: Array(4)
0: 58
1: 72
2: 113
3: 74
length: 4
__proto__: Array(0)
HP: 100
Weakness: (2) ["electric", "grass"]
attacks: (4) ["Water-Gun", "Rain-Splash", "Bubble", "Sleepy-Ball"]
evos: (2) ["Watertortle", "Blastoise"]
isEvolved: false
name: "Squirtles"
type: "water"
__proto__: Object

Now you got too attached with the little squirtle and don't want it to grow just yet. Let's remove the evos array.

delete pokemon.evos;
true
pokemon;

Output

{name: "Squirtles", type: "water", HP: 100, isEvolved: false, AttackTypes: Array(3), …}
AttackTypes: (3) ["super-attack", "defense", "special-defense"]
DefensePower: (4) [58, 72, 113, 74]
HP: 100
Weakness: (2) ["electric", "grass"]
attacks: (4) ["Water-Gun", "Rain-Splash", "Bubble", "Sleepy-Ball"]
isEvolved: false
name: "Squirtles"
type: "water"
__proto__: Object

We have deleted the evos array inside our JSON.

Thus we can perform read, write, update and delete operations on a JSON array and also use some common array methods just like in a regular JavaScript Array.