Home » JSON

JSON Objects

JSON Objects: In this tutorial, we are going to learn about the JSON Objects with examples.
Submitted by Siddhant Verma, on November 10, 2019

We have heard time and again that everything in JavaScript is an object.

This very fact was extensively used to weave the lightweight super popular data format called JSON. In JSON, all the data represented in key-value pairs goes inside a pair of opening and closing curly braces '{ }'. This indicates an object in JavaScript.

JSON data can have objects inside it for example,

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

The above represents a JSON object. Inside this object, we have key-value pairs of different data types for example name represents a string, age is a number and weapons being an array of strings. We can also have nested JSON objects, which means a key-value pair can be an object in itself containing multiple key-value pairs. For instance,

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

Inside our JSON object, we have a Ninjas array with another object NinjaProperties inside it which contains multiple key-value pairs. The NinjaProperties itself is a key and its value is a set of other values,

We can treat JSON object similar to the way we treat JavaScript objects,

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

Output

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

We can access property names either using the dot notation or using the square bracket notation as we do in arrays. Let's see an example of each,

    pokemon.type;
    Pokemon["name"];

Output

"water"
"Squirtles"

We can also assign new properties to the JSON object,

    pokemon.info="pokedex";
    Pokemon;

Output

	{name: "Squirtles", type: "water", HP: 100, isEvolved: false, info: "pokedex"}
	HP: 100
	info: "pokedex"
	isEvolved: false
	name: "Squirtles"
	type: "water"
	__proto__: Object

Similarly, we can modify existing values too,

    pokemon.HP=40;
    Pokemon;

Output

{name: "Squirtles", type: "water", HP: 40, isEvolved: false, info: "pokedex"}

You can see the HP of our Pokemon is now changed to 40 instead. Must be an arduous battle with another wild squirtle!.

We can also loop through our objects,

    for(t in pokemon){
	    console.log(t);
    }

Output

    name
    type
    HP
    isEvolved
    Info

Every element of the object is the key holding the values.

Let's how a real JSON object looks like, the kind of thing we receive from API's. Visit https://jsonplaceholder.typicode.com/users/2 on the browser to see a list of users in the form of some JSON data.

{
	"id": 2,
	"name": "Ervin Howell",
	"username": "Antonette",
	"email": "[email protected]",
	"address": {
		"street": "Victor Plains",
		"suite": "Suite 879",
		"city": "Wisokyburgh",
		"zipcode": "90566-7771",
		"geo": {
			"lat": "-43.9509",
			"lng": "-34.4618"
		}
	},
	"phone": "010-692-6593 x09125",
	"website": "anastasia.net",
	"company": {
		"name": "Deckow-Crist",
		"catchPhrase": "Proactive didactic contingency",
		"bs": "synergize scalable supply-chains"
	}
}

You can see we get the JSON data for user with id 2 and inside this JSON object we can also see two nested objects with the key of address and company.