JavaScript - Create Partial Objects Array from Another Array

Last Updated : 24 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

JavaScript 
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.

JavaScript 
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.

JavaScript 
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().

JavaScript 
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.

JavaScript 
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.

JavaScript 
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.


Next Article
Spring Boot Tutorial

K
krishnav4
Improve
Article Tags :

Similar Reads