Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an array of partial objects from another array in JavaScript?
Arrays are one of the most commonly used data types in JavaScript. They are used to store collections of data and allow for efficient access and manipulation of data. Arrays can contain any type of data, including primitive values, objects, and even other arrays.
The technique of creating an array of partial objects from an array is a valuable technique when dealing with complex data sets. Partial objects contain only a subset of the data from the original array, allowing us to focus on a particular set of data. This can be especially useful when dealing with large data sets, as it makes it easier to work with just the data that is necessary.
Creating an array of partial objects from another array in JavaScript can be done using the map() method. The map() method allows you to iterate over an array and create a new array with the results of calling a provided function on every element in the original array.
Syntax
The syntax for creating an array of partial objects from another array in JavaScript is as follows −
let originalArray = [
{ property1: value1, property2: value2, ... },
{ property1: value1, property2: value2, ... },
...
];
let partialObjects = originalArray.map(item => {
return { partialProperty1: item.property1, partialProperty2: item.property2 };
});
In this syntax, originalArray is the name of the original array containing the objects you want to create partial objects from. The map method is called on this array, and a function is passed as an argument. This function is called on every element of the original array, and it's used to create a new array of partial objects.
The function passed to the map method takes one argument, a single element of the original array. It is usually referred to as an item. In this function, you can return an object that contains only the properties you want to extract from the original object.
It's also possible to use destructuring assignment to achieve the same result.
let partialObjects = originalArray.map(({property1, property2}) =>
({partialProperty1: property1, partialProperty2: property2}));
Note that the map method does not modify the original array, it creates a new one containing the partial objects.
Ways to Create an Array of Partial Objects
Using map() Method
In JavaScript, the map() function is a method that can be called on an array to create a new array with the results of calling a provided function on every element in the original array. The new array will have the same number of elements as the original array, but each element will be transformed based on the function provided by the map() method.
Example
Here is an example of how you can use the map() method to create an array of partial objects from another array −
<html>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let arrayItems = [
{ id: 1, name: "ABC", model: 2019 },
{ id: 2, name: "PQR", model: 2022 },
{ id: 3, name: "XYZ", model: 2021 },
];
document.getElementById("result1").innerHTML = "Original Array: <br>" +
JSON.stringify(arrayItems);
let partialArrayItems = arrayItems.map((item) => {
return { name: item.name, model: item.model };
});
document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
</script>
</body>
</html>
In the above example, we have an originalArray containing objects with properties id, name, and age. We use the map method to iterate over the array and create a new array partialObjects containing only the id and name properties of each object in the original array.
Using Destructuring
In this method, we have used destructuring assignment and the rest operator to extract the properties. The destructuring assignment will extract the model and id properties from each object in the arrayItems array and the rest operator will extract all the remaining properties into a new object called rest.
Example
<html>
<head>
<title>Creating an array of partial objects from another array using destructuring </title>
</head>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let arrayItems = [
{ id: 1, name: "ABC", model: 2019, category: "car" },
{ id: 2, name: "PQR", model: 2022, category: "bike" },
{ id: 3, name: "XYZ", model: 2021, category: "truck" },
];
document.getElementById("result1").innerHTML = "Original Array: <br>" +
JSON.stringify(arrayItems);
let partialArrayItems = arrayItems.map(({ model, id, ...rest }) => rest);
document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
</script>
</body>
</html>
Using reduce() Method
The reduce() method is another way that allows you to iterate over an array and create a single value or object with the results. This can be useful if you need to create a single object with partial properties from multiple objects.
Example
<html>
<head>
<title>Creating an array of partial objects from another array using reduce() method</title>
</head>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let arrayItems = [
{ id: 1, name: "ABC", model: 2019, category: "car" },
{ id: 2, name: "PQR", model: 2022, category: "bike" },
{ id: 3, name: "XYZ", model: 2021, category: "truck" },
];
document.getElementById("result1").innerHTML = "Original Array: <br>" +
JSON.stringify(arrayItems);
const partialArrayItems = arrayItems.reduce((res, item) => {
res.push({ id: item.id, model: item.model });
return res;
}, []);
document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
</script>
</body>
</html>
Conclusion
In conclusion, the map() method is a powerful tool for creating new arrays from existing arrays in JavaScript. It allows you to iterate over an array, perform some operation on each element, and create a new array with the results. It can be very useful when working with arrays of objects and you need to extract only certain properties from each object.
It's important to note that the map() method does not modify the original array, it creates a new one. So, if you want to modify the original array, use the forEach() method instead.
9K+ Views
