How to Create an Array of Object Literals in a Loop using JavaScript?
Last Updated :
20 Aug, 2024
Creating arrays of object literals is a very frequent activity in JavaScript, as often when working with data structures, several objects are needed. This article will allow your hand through different ways of coming up with an array of object literals in a loop in JavaScript.
Here are different approaches to creating an array of object literals in a loop:
Using For Loop
Using a for loop in JavaScript, you can create an array of object literals by iterating through the loop and dynamically generating objects within each iteration. Each object is then added to the array, allowing for efficient creation of multiple similar objects with varying values.
Syntax:
for (let i = 0; i < length; i++) {
array[i] = { key: value };
}Example: The for loop iterates through a specified number of times, creating objects with an id and name property and adding them to the array.
JavaScript
const length = 5;
const array = [];
for (let i = 0; i < length; i++) {
array[i] = { id: i + 1, name: `Item ${i + 1}` };
}
console.log(array);
Output[
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
{ id: 5, name: 'Item 5' }
]
Using Array.prototype.push() Method
The Array.prototype.push() method in JavaScript is used to add one or more elements to the end of an array. This method modifies the original array and returns the new length of the array after the elements have been added
Syntax:
for (let i = 0; i < length; i++) {
array.push({ key: value });
}Example: In this approach the push() method is used to push the object literals into the array in each iteration of the for loop.
JavaScript
const length = 5;
const array = [];
for (let i = 0; i < length; i++) {
array.push({ id: i + 1, name: `Item ${i + 1}` });
}
console.log(array);
Output[
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
{ id: 5, name: 'Item 5' }
]
Using Array.from() Method
The Array.from() method in JavaScript creates a new array instance from an array-like or iterable object. Array. from() returns the new Array with length elements that every one of them is an object literal. The (_, i) are the index and the value placeholders where _ is set aside for a value that has not been looked up or used.
Syntax:
const array = Array.from({ length }, (_, i) => ({ key: value }));Example: This example shows the use of Array.from() method.
JavaScript
const length = 5;
const array = Array.from({ length }, (_, i) => ({ id: i + 1, name: `Item ${i + 1}` }));
console.log(array);
Output[
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
{ id: 5, name: 'Item 5' }
]
Using Map() Method
The map() method in JavaScript creates a new array by applying a provided function to every element in the calling array.
Syntax:
const array = new Array(length).fill(null).map((_, i) => ({ key: value }));Example: Here, new Array(length). fill(null) generates an array filled with ‘null’ object elements and map() is used to map the null objects generated by fill(null) into objects.
JavaScript
const length = 5;
const array = new Array(length).fill(null).map((_, i) => ({ id: i + 1, name: `Item ${i + 1}` }));
console.log(array);
Output[
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
{ id: 5, name: 'Item 5' }
]
Using Array.fill() Method
The fill() method in JavaScript fills all or part of an array with a static value, modifying the original array.
Syntax:
const array = new Array(length).fill({ key: value });Example: This approach populates the array with one object literal of some empty object type. Also recall that all placeholders will point to the same object and therefore if the objects are mutable, one can experience unexpected behaviors.
JavaScript
const length = 5;
const array = new Array(length).fill({ id: 1, name: 'Item 1' });
console.log(array);
Output[
{ id: 1, name: 'Item 1' },
{ id: 1, name: 'Item 1' },
{ id: 1, name: 'Item 1' },
{ id: 1, name: 'Item 1' },
{ id: 1, name: 'Item 1' }
]
Using While Loop
A while loop in JavaScript repeatedly executes a block of code as long as a specified condition evaluates to true.
Syntax:
let i = 0;
while (i < length) {
array[i] = { key: value };
i++;
}
Example: Compared to the for loop, while loop is just as useful for creating the same object literals and adding them to the array until the condition is met.
JavaScript
const length = 5;
const array = [];
let i = 0;
while (i < length) {
array[i] = { id: i + 1, name: `Item ${i + 1}` };
i++;
}
console.log(array);
Output[
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
{ id: 5, name: 'Item 5' }
]
Conclusion
To create an array of object literals using JavaScript we have multiple ways that can be implemented, [some of the following having their certain pros and cons as shown]: The kind of method to be used depends with the specifications of the task and the available constraints. Regardless of loops or array methods, or utility functions, this knowledge provides more adaptable and efficient solutions.
Similar Reads
How to Move a Key in an Array of Objects using JavaScript? The JavaScript array of objects is a type of array that contains JavaScript objects as its elements.You can move or add a key to these types of arrays using the below methods in JavaScript:Table of ContentUsing Object Destructuring and Map()Using forEach() methodUsing for...of LoopUsing reduce() met
5 min read
How to Push an Object into an Array using For Loop in JavaScript ? JavaScript allows us to push an object into an array using a for-loop. This process consists of iterating over the sequence of values or indices using the for-loop and using an array manipulation method like push(), to append new elements to the array. We have given an empty array, and we need to pu
3 min read
How to use forEach with an Array of Objects in JavaScript ? Using the forEach() method with an array of objects in JavaScript is essential for iterating over collections and performing operations on each object. This guide explores effective techniques to utilize forEach() for array manipulation, enhancing your coding skills. Syntax: array.forEach( function(
3 min read
How to convert a map to array of objects in JavaScript? A map in JavaScript is a set of unique key and value pairs that can hold multiple values with only a single occurrence. Sometimes, you may be required to convert a map into an array of objects that contains the key-value pairs of the map as the values of the object keys. Let us discuss some methods
6 min read
How to Create an HTML Table from an Object Array Using JavaScript ? Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays. Table of Content Using innerHTML propertyUsing appendChil
2 min read
How to Convert Array into Array of Objects using map() & reduce() in JavaScript? An array of objects can contain multiple objects with the same properties i.e. key-value pairs. But a map does not contain duplicate values which means if you convert an array of objects with duplicate objects into a map, it will contain only the unique key-value pairs. Below are the approaches to c
2 min read
How to Create Array of Objects From Keys & Values of Another Object in JavaScript ? Creating an array of objects from the keys and values of another object involves transforming the key-value pairs of the original object into individual objects within an array. Each object in the array represents a key-value pair from the source object. Below approaches can be used to accomplish th
3 min read
How to convert Object's array to an array using JavaScript ? Given an array of objects and the task is to convert the object values to an array with the help of JavaScript. There are two approaches that are discussed below: Approach 1:We can use the map() method and return the values of each object which makes the array. Example: html
2 min read
How to Get a List of Array Keys in JavaScript? Here are the different methods to get a list of associative array keys in JavaScript1. Using JavaScript for each loopIn this method, traverse the entire associative array using a for each loop and display the key elements of the array. javascriptlet a = {Newton: "Gravity",Albert: "Energy",Edison: "B
3 min read
How to convert a DOM nodelist to an array using JavaScript ? NodeList objects are the collection of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll(). Although NodeList is not an actual Array but it is possible to iterate over it with the help of forEach() method. NodeList can also be converted into
2 min read