Tuesday , 16 July 2019
Home / Programming / JavaScript / Nesting Objects and Arrays – JSON Tutorial
Nesting objects and arrays
Nesting objects and arrays

Nesting Objects and Arrays – JSON Tutorial

This tutorial is a part of the JSON tutorial series. You can view the full list of tutorials by clicking here.

Let’s talk about nesting JSON data. We’ll learn about nesting objects and arrays. Let’s update our script to this.

Inside our JSON object, we store 2 other JSON objects. Since we do it this way, we now have access to the other JSON objects. This makes it easier to manage and store data. Let’s learn how to access the properties using the people variable. Add this bit of code into your script.

To access the properties of the person1 object from the people object, you can use 2 methods. The first method is dot syntax.Just like any other JSON data, you simply type in the name of the parent object followed by the property names that contain other objects. In our case, this would be people.p1. From there, you can access any property from the person1 object.

The second method is using square bracket notation. Even though this is an object and not an array, square bracket notation can apply to objects as well.


When you’re nesting objects, you have to give each object a name. Arrays, on the other hand, you have the option of giving each index a name or not. If you don’t define a key name, then JavaScript will automatically assign each key with numbers. This can be convenient if  you’re storing large amounts of data inside a JSON object. Let’s learn how to create arrays in JSON objects.

Comment out your code and then add this bit of code into your script.

A couple of things to note here. You’ll notice, instead of creating separate JSON objects, I hard code it into the people JSON object. You simply use curly brackets every time you want to create an object inside of an object. From there, you can treat it like any other JSON object.

Our u2 property contains our array. Let’s focus here. To create an array inside a JSON object, you type in square brackets. You do not have to type in new Array() like a regular array. JavaScript will know you want to create an array inside of an object by typing in square brackets.

Here is where it gets complex, I’m storing objects inside of an array. We have 2 objects separated by a comma. Unlike u1, we don’t have to define a property for each object it’s inside an array. Each object is automatically assigned a key. I could’ve had lastName within the first object, but I decided to separate this property from the first object for example purposes. Let’s now learn how to access these properties.

Add this bit of code into your script.

In the above example, I’m accessing the people object and it’s properties with a mixture of dot syntax and square bracket notation.

First we access the people object, then the u2 object. Since the u2 object is an array, we have to start using square bracket notation. The name property is stored inside the first object in the array. So, we access the 0 index and then from there, we can access the name property. We do the same thing for the last name, but the lastName property is inside the second object so we have to use the 1 index.

In the last example, we use pure square bracket notation. Nesting objects and arrays can get very confusing very fast!


So, which should you use? Should you just stick to nesting objects or nest arrays? It’s up to you and that’s the beauty of it. They both have their advantages and a lot of JavaScript developers tend to use both methods. In the above examples, I barely formatted our JSON object, but that doesn’t mean you shouldn’t either. Take the time to organize everything and see what works for you.

About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …


  1. What if I want to dynamically add u3 with no data? And then later fill data to it?

  2. very helpful for me this code ….thks

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.