JavaScript – Create Partial Objects Array from Another Array
Here are the different ways to create an array of partial objects from another array in JavaScript
1. Using map()
The map() method is the most efficient and commonly used way to extract specific properties from objects in an array. It creates a new array by transforming each object.
const a = [
{ id: 1, age: 25, city: "Delhi" },
{ id: 2, age: 30, city: "Mumbai" },
{ id: 3, age: 35, city: "Chennai" },
];
const res = a.map(({ id, city }) =>
({ id, city }));
console.log(res);
Output
[
{ id: 1, city: 'Delhi' },
{ id: 2, city: 'Mumbai' },
{ id: 3, city: 'Chennai' }
]
Here, object destructuring is used to extract only the id and city properties.
2. Using a for Loop
If you prefer more control over the process, a for loop is a simple way to achieve the same result.
const a = [
{ id: 1, marks: 85, state: "UP" },
{ id: 2, marks: 90, state: "MH" },
{ id: 3, marks: 80, state: "TN" },
];
const res = [];
for (let i = 0; i < a.length; i++) {
const { id, marks } = a[i];
res.push({ id, marks });
}
console.log(res);
Output
[ { id: 1, marks: 85 }, { id: 2, marks: 90 }, { id: 3, marks: 80 } ]
This approach is useful when working in environments that don’t support modern ES6+ features.
3. Using reduce()
The reduce() method can also be used to transform an array into another array of partial objects. This is especially useful if you want to perform additional logic while extracting properties.
const a = [
{ id: 1, cost: 150, stock: 10 },
{ id: 2, cost: 200, stock: 5 },
{ id: 3, cost: 100, stock: 20 },
];
const res = a.reduce((acc, { id, cost }) => {
acc.push({ id, cost });
return acc;
}, []);
console.log(res);
Output
[ { id: 1, cost: 150 }, { id: 2, cost: 200 }, { id: 3, cost: 100 } ]
This approach allows you to maintain full control over how the data is transformed.
4. Dynamically Selecting Properties
If the properties you want to extract are dynamic (e.g., based on user input), you can use an array of property names along with Object.fromEntries().
const a = [
{ id: 1, price: 500, qty: 10 },
{ id: 2, price: 700, qty: 15 },
{ id: 3, price: 300, qty: 20 },
];
const props = ["id", "price"];
const res = a.map((obj) =>
Object.fromEntries(props.map((key) =>
[key, obj[key]]))
);
console.log(res);
Output
[ { id: 1, price: 500 }, { id: 2, price: 700 }, { id: 3, price: 300 } ]
This is ideal for scenarios where the required properties may change dynamically.
5. Extracting Multiple Partial Arrays
Sometimes, you might want to extract specific fields as separate arrays instead of partial objects.
const a = [
{ id: 1, category: "Electronics", brand: "Sony" },
{ id: 2, category: "Clothing", brand: "Zara" },
{ id: 3, category: "Furniture", brand: "IKEA" },
];
const ids = a.map((obj) => obj.id);
const brands = a.map((obj) => obj.brand);
console.log(ids);
console.log(brands);
Output
[ 1, 2, 3 ] [ 'Sony', 'Zara', 'IKEA' ]
This method is useful when you need arrays of specific fields for further processing.
6. Handling Nested Objects
If your objects contain nested structures, you can use destructuring with a combination of mapping techniques.
const a = [
{ id: 1, details: { price: 1000, stock: 50 } },
{ id: 2, details: { price: 1500, stock: 30 } },
{ id: 3, details: { price: 800, stock: 100 } },
];
const res = a.map(({ id, details: { price } }) =>
({ id, price }));
console.log(res);
Output
[
{ id: 1, price: 1000 },
{ id: 2, price: 1500 },
{ id: 3, price: 800 }
]
This method is handy when working with deeply nested data.
