Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
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>
Original Array:
[{"id":1,"name":"ABC","model":2019},{"id":2,"name":"PQR","model":2022},{"id":3,"name":"XYZ","model":2021}]
Array of partial objects:
[{"name":"ABC","model":2019},{"name":"PQR","model":2022},{"name":"XYZ","model":2021}]
In the above example, we have an originalArray containing objects with properties id, name, and model. We use the map method to iterate over the array and create a new array partialArrayItems containing only the name and model properties of each object in the original array.
Using Destructuring Assignment
In this method, we use destructuring assignment and the rest operator to extract the properties. The destructuring assignment will extract specific properties from each object, while the rest operator collects all the remaining properties into a new object.
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>
Original Array:
[{"id":1,"name":"ABC","model":2019,"category":"car"},{"id":2,"name":"PQR","model":2022,"category":"bike"},{"id":3,"name":"XYZ","model":2021,"category":"truck"}]
Array of partial objects:
[{"name":"ABC","category":"car"},{"name":"PQR","category":"bike"},{"name":"XYZ","category":"truck"}]
Using reduce() Method
The reduce() method is another way that allows you to iterate over an array and accumulate results. While typically used for creating single values, it can also be used to create arrays of partial objects by building up the result array incrementally.
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>
Original Array:
[{"id":1,"name":"ABC","model":2019,"category":"car"},{"id":2,"name":"PQR","model":2022,"category":"bike"},{"id":3,"name":"XYZ","model":2021,"category":"truck"}]
Array of partial objects:
[{"id":1,"model":2019},{"id":2,"model":2022},{"id":3,"model":2021}]
Comparison
| Method | Best For | Performance |
|---|---|---|
map() |
Direct property selection | Fastest |
| Destructuring | Excluding specific properties | Good |
reduce() |
Complex transformations | Slower for simple cases |
Conclusion
The map() method is the most efficient and readable approach for creating partial objects from arrays. Use destructuring when you need to exclude specific properties, and reserve reduce() for more complex transformations that require accumulating state.
11K+ Views
