How to create an array of partial objects from another array in JavaScript ?

A partial object array contains some selected key-value pairs of the object array. In this article, we will understand how to create an array of partial objects from another object’s array. The partial object contains the subset of the data. We can use different methods like map() for creating a partial array from another array.

These are some common methods:

Approach 1: Using the map() method

By using the map() method we can create an array of partial objects from another object’s array. The map() method takes the keys of the object array as the parameters which are required to be in the desired object array and returns the key-value pairs of that particular key. In the below example, we obtain the key-value pairs of the name and age as the array of partial objects of which the parameters are given in the map method.

Syntax:

partialObjectArray = ObjectArray.map((
    {key 1, key 2, ...key n}) => ({key 1, key 2, ...key n}));

Note: key 1, key 2, …key n are the fields that are needed in the partial object array

Example: This is the illustration of creating an array of partial objects from another array using the map() method.

Javascript

let = studentDetails = [
    {
        name: 'dinesh',
        age: 20,
        marks: 30,
        Grade: 'F'
    },
    {
        name: 'divi',
        age: 20,
        marks: 60,
        Grade: 'B'
    },
    {
        name: 'vignesh',
        age: 30,
        marks: 80,
        Grade: 'A'
    }]
let partialStudentDetails = studentDetails.map((
    { name, age, Grade }) => ({ name, age, Grade }));
console.log(partialStudentDetails);

Output

[
  { name: 'dinesh', age: 20, Grade: 'F' },
  { name: 'divi', age: 20, Grade: 'B' },
  { name: 'vignesh', age: 30, Grade: 'A' }
]

Approach 2: Using Destructuring

Rather than giving all the required fields of the object array in the map() method which is a difficult task if there are multiple fields in the object. we can use the map method in the below way to create a partial object array. The first parameters must be the fields that are not needed in the resultant object array. 

Syntax:

partialObjectArray = ObjectArray.map(({ key 1, key 2, ...rest }) => rest);

Note: key 1, and key 2 are the fields that are not required in the resultant object array.

Example: This is another illustration to create an array of partial objects from another array using the map() method.

Javascript

let = studentDetails = [
    {
        name: 'dinesh',
        age: 20,
        marks: 30,
        Grade: 'F'
    },
    {
        name: 'divi',
        age: 20,
        marks: 60,
        Grade: 'B'
    },
    {
        name: 'vignesh',
        age: 30,
        marks: 80,
        Grade: 'A'
    }]

// The parameter marks is not required
// in the resultant object array

let partialStudentDetails = studentDetails.map((
    { marks, ...rest }) => rest);
console.log(partialStudentDetails);

Output

[
  { name: 'dinesh', age: 20, Grade: 'F' },
  { name: 'divi', age: 20, Grade: 'B' },
  { name: 'vignesh', age: 30, Grade: 'A' }
]

In the above example, we get name, age, and marks key-value pairs in a partial object array.

Approach 3: Using reduce Method()

Reduce method also use to iterate over an array and create a single value and object,

Example: In this example, we are using reduce method to create a partial object from another array.

Javascript

let studentDetails = [
    {
        name: 'dinesh',
        age: 20,
        marks: 30,
    },
    {
        name: 'divi',
        age: 20,
        marks: 60,
    },
    {
        name: 'vignesh',
        age: 30,
        marks: 80,
    }]

const partialStudentDetails = studentDetails.reduce((res, item) => {
    res.push({ name: item.name, age: item.age, marks: item.marks });
    return res;
}, []);
console.log(partialStudentDetails);

Output

[
  { name: 'dinesh', age: 20, marks: 30 },
  { name: 'divi', age: 20, marks: 60 },
  { name: 'vignesh', age: 30, marks: 80 }
]

Approach 4: Using forEach() method

The arr.forEach() method calls the provided function once for each element of the array. The provided function may perform any kind of operation on the elements of the given array. 

Syntax:

array.forEach(callback(element, index, arr), thisValue);

Example: In this example, the forEach() method is used to iterate over each object in the originalArray. For each object, a new partial object is created with selected properties (in this case, id and name), and it is pushed to the partialObjectsArray.

Javascript

// Original array of objects
const originalArray = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Alice', age: 25 },
  { id: 3, name: 'Bob', age: 35 },
];

// Array to store partial objects
const partialObjectsArray = [];

// Using forEach() to create partial objects
originalArray.forEach(obj => {
  const partialObj = {};
  partialObj.id = obj.id;
  partialObj.name = obj.name;
  // You can include other properties as needed
  partialObjectsArray.push(partialObj);
});

console.log(partialObjectsArray);

Output

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Alice' },
  { id: 3, name: 'Bob' }
]