JavaScript

JavaScript Lesson: 26 Nested Array Object in Javascript

In the previous knowledge bit, we have demonstrated the difference in between in arrays and in an object. Now in this knowledge bit, we are going to learn the concept of the nested array object in javaScript. We will learn to create an object inside of the array, and an array inside of the object. At the end of this lesson, we will be able to create an object and array inside an array

Nested Array and Nested Object in Javascript

Creating and Accessing Nested Array

In JavaScript, we can create an array inside another array. So let’s go ahead and see that how we can create an array in inside the array. Let’s take an example of the car which has many properties like manufacturer, car body type, car color. Here we have created an array with name car and inside an array, we define two objects. Each object contains some key values and arrays. You can notice in the following example we have created an array and then inside an array, we defined another array:

var car = [

{

manufacturer: "Toyota",

vitz: ["Blue","Hatchback"],

corolla: ["Silver","Sedan"],

},

{
manufacturer: "Honda",
Civic: ["White","Hatchback"],
city : ["Black","Sedan"],
}
];       

Here we have an array ‘car’ which contain two objects and every object contain some properties. Here our object contains key ‘manufacturer’ with property Toyota and Honda and then it contains car type array with different car properties. So if we want to access the car type of Vitz which exists in index zero in our array car. Here is the demonstration below:

car[0].vitz[1];      

Here we first target our array name which is the car and then target index zero because our Vitz car type exists at index zero and then we target index 1.

The output of the above code is below:

JavaScript Lesson: Nested Array Object in Javascript Example

So if we want to access the color of the civic car then we first target car array and then pass that car 1 index because civic exist in the second object and then we target civic array to access the color of the civic car.

Here is the illustration of output below:

nested object in javaScript

Creating and Accessing Nested Array Object in Javascript

Just like the nested array, we can create the nested object in JavaScript too. Let’s take the same car example there and create an object with name car and then define the car properties. Like its manufacture name, car model, color, body type. Here is the demonstration below:

var car = {

manufacturer: {

toyota:{

vitz: {

color: "Blue",

bodyType: "Hatchback"

},

corolla: {

color: "Silver",

bodyType: "Sedan"

}},

Honda: {

civic:{

color: "White",

bodyType: "Hatchback"

},

city: {

color: "Black",

bodyType: "Sedan"

}}}};       

You can notice there we have the object with name car and inside an object, we have another object with name manufacturer and then again we have two more objects with name Toyota and Honda and inside that object we few more object. We have around eight objects in total. So if we want to access the color of the civic car then this is how we can access. Here is the demonstration below:

nested array and nested object in javaScript example

And again if we want to know the body type of car Vitz then this is how we can do that. Here is the illustration below:

Nested object example

So these are one of the important skills that the developer should have. Nested Array Object in Javascript are very useful when you want to store highly structured data.

In this knowledge bit, we have studied that how we can declare the Nested Array Object in JavaScript. We have also learned that how we can access particular level deep of object or an array at a time to print data. So hopefully this knowledge bit helps you understand the difference between arrays and object and also.

You can also have a look at our whole JavaScript series.

Most Popular

To Top