In this Javascript tutorial, We are gonna have a look at How to Create objects in the array and also gonna be in its practical application as well. So we can say a complete must-read to understand javascript objects and arrays

So Lets Start With Basics

What is an array?

So when we are talking about how to store objects in an array than that’s an obvious question that What is an array So in Basic or even in advance terms array is just a way to store multiple data objects with a single name, Yeah let’s see an example to understand it better

//Declaring a newArrray /
var array1 = ["1",1,true]

//[] - these brackets are used to declare an variable as an array //

As You can see here i have declared a new variable with name as array1 and that is holding three different value first one “1” is a string the second one is a number 1 and the third one is a boolean of true yeah so all of these are 3 different data types and they are stored under one name and i can call them with one name as well Let’s see that as well

//Declaring a newArrray //

var array1 = ["1",1,true];

//Acsessing the values to output them in console //
console.log(`This is the first item in the array and it will give me an string ${array1[0]}`);
console.log(`This is the second item in the array and it will give me an number ${array1[1]}`);
console.log(`This is the third item in the array and it will give me an boolean ${array1[2]}`);

Actually don’t you think that this code is not looking that nice means having 3 console.log statements is not a good thing at all hmm i have an idea why not use a for loop to chain them

Let’s try that as well by running this code

//Declaring a newArrray //

var array1 = ["1",1,true];

//Using For Loop to chain and acsessing the array //

for (var i = 0 ; i < array1.length ; i++) {
	console.log(`${array1[i]} is the ${i + 1 } item in the array`)
}

Now here I am using a for loop to access the array items if you forget about for loop you can have a look at here in the MDN DOCS for to learn more about for loop

Now if you know for loop than maybe you are thinking that what i am doing in the console.log statement so actually, first of all, i am using Template Strings to output content if you don’t know you can have a complete understanding of it Here and in there i am calling variables

Now the answer to a few of your queries that why i added a 1 here in this console.log statement instead of calling the “i” alone am calling i and then adding 1 to it it’s actually due to the indexing of an array

console.log(`${array1[i]} is the ${i + 1 } item in the array`)

//Here I am Adding 1 to i after "is the " and before item try to spot //

Let’s have a look at indexing an array in brief

Indexing an array

Actually the main concept of an array that you can assume that array is a guy whose counting starts not from 1 it starts from 0 yeah it is not like us it starts counting from 0 instead of 1 that’s why the 1 st item is called as 0 the second as 1

Maybe Enough talk about an array lets start where we started that

“How to Create objects in an array “

Storing an object inside an array

Its pretty straight forward array is just a way to store different types of data types and accessing under the same name and yeah you guessed it the right object is nothing it is just a simple data type like a string or a number Lets have a look how to do that

//Creating an array to hold different objects //

var students = [{
	first_name:"Harry",
	last_name :"Potter",
	house     :"Griffin"
},
{
	first_name:"Ron",
	last_name :"Not Remember",
	house     :"Griffin"
},
{
	first_name:"Hermoine",
	last_name : "Not Remember",
	house     : "Griffin"
}
]

//Now Using For loop to again Acsessing the data //

for (var i = 0 ; i < students.length ; i++) {
	console.log(`${students[i].first_name} is the ${i + 1 } item in the array`)
}

Adding an object inside an array by .push

Now let’s have a look at how to add an object inside an array using .push let’s have a look

//Declaring the same array //

var students = [{
	first_name:"Harry",
	last_name :"Potter",
	house     :"Griffin"
},
{
	first_name:"Ron",
	last_name :"Not Remember",
	house     :"Griffin"
},
{
	first_name:"Hermoine",
	last_name : "Not Remember",
	house     : "Griffin"
}
]

//Creating an object //

var newEntry = {
	first_name:"Rons Sister",
	last_name : "Ahh No Idea",
	house : "Grifiin"
}


//Adding the object to the array //

students.push(newEntry)

//Now the Object is added to the array students you can check it by calling students //

Now in the above code, i actually used the old array and just created an object named as newEntry and added it to the array by using .push Simple Now let’s have a look at how to access the whole data

Adding data to the object inside an array

Let’s see that how can we add data to the object which is stored inside an array

Lets first start by adding a new property to an object which is inside an array then we will have a look at how to add data to the same property

Adding New Property to an object which is inside an array

Adding a New Property to an object which is inside an array is quite simple it is quite simple the syntax is same as to add a new property to an object just we need to replace the object name with the array index

The General Syntax is quite simple

array[arrayIndex].PropertyName = "Value to assign to the property"

Let’s add a new property to our array

//Declaring the same array //

var students = [{
	first_name:"Harry",
	last_name :"Potter",
	house     :"Griffin"
},
{
	first_name:"Ron",
	last_name :"Not Remember",
	house     :"Griffin"
},
{
	first_name:"Hermoine",
	last_name : "Not Remember",
	house     : "Griffin"
}
]

//Adding their role in the movies to the objects //

students[0].role = "Lead"

We can also add the same properties to everyone by using for loop or any type of loop

Adding Data to same Property

If we want to add multiple pieces of data to a single property we can create an array it is the easiest method to do so let’s have a look there

We will try to add the friend’s list in each of these characters lets see

//Declaring the original array //

var students = [{
	first_name:"Harry",
	last_name :"Potter",
	house     :"Griffin"
},
{
	first_name:"Ron",
	last_name :"Not Remember",
	house     :"Griffin"
},
{
	first_name:"Hermoine",
	last_name : "Not Remember",
	house     : "Griffin"
}
]

var friends = ["RON" , "HERMOINE"]

students[0].friends = friends

This above code will add a friends property to the first object first_named as Harry inside the array with the value of the friends array we created

Conclusion

Now I Hope that Now you now have complete info that how to add retrieve object to an array and maybe this article is interesting for you to read If you have any questions regarding this article you can always leave a comment and i am happy to Help