Monday , 20 November 2017
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.

Arrays

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!

Conclusion

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

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

One comment

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

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link