How to extract value of a property as array from an array of objects ?

We will try to understand that how we may extract the value of a property as an array from an array of objects in JavaScript with the help of certain examples.

Pre-requisite: Array of Objects in JavaScript

Example:

Input:
[
    {
        apple: 2,
        mango: 4,
    },
    {
        apple: 3,
        mango: 6,
    },
    {
        apple: 7,
        mango: 11,
    },
]
Output: [2, 3, 7]

Explanation:

• From an array containing multiple objects, we first have to select on our own the desired key.
• Thereafter choosing the desired key we will have to select all the values corresponding to the key in each and every object passed inside the array.
• Thereafter in output, we have to print the values corresponding to the key in the form of an array. 

After understanding the desired task from the above example, let us quickly see the following approaches through which we may understand as well as solve solutions for the above-shown task.

Approach 1: Using Array Push

• A helper function is created which consists of a parameter that is our main array of objects.
• Create a temporary array inside the function in which results will be stored and printed later. 
• Then using the for-of loop, iterate over the values of that array of objects and thereafter select values for the desired chosen key.
• Later after fetching values store those values in that temporary array, return that value from the function, and then print it as an output.

Example: Below is the implementation of the above-illustrated approach.

let desiredValue = (fruits_quantity) => {
    let output = [];
    for (let item of fruits_quantity) {
        output.push(item.apple);
    }
    return output;
};

let fruits_quantity = [
    {
        apple: 2,
        mango: 4,
    },
    {
        apple: 3,
        mango: 6,
    },
    {
        apple: 7,
        mango: 11,
    },
];

let result = desiredValue(fruits_quantity);
console.log(result);

Output:

[ 2, 3, 7 ]

Approach 2: Using Map

• A helper function is created which consists of two parameters: the first one is our main array of objects and the second parameter is our desired key name.
• As illustrated in the previous approach, again iterate over the array of objects, but this time map() function of the array is used.
• Thereafter value in the form of an array is returned.

Example: Below is the implementation of the above approach.

let desiredValue = (fruits_quantity, desired_key) => {
    let desiredValue = fruits_quantity.map((element) => element[desired_key]);
    return desiredValue;
};

let fruits_quantity = [
    {
        apple: 2,
        mango: 4,
    },
    {
        apple: 3,
        mango: 6,
    },
    {
        apple: 7,
        mango: 11,
    },
];
// Corresponding to this key values 
// (as an fruits_quantity) would be obtained...
let desired_key = "apple"; 

let result = desiredValue(fruits_quantity, desired_key);
console.log(result);

Output:

[ 2, 3, 7 ]

Approach 3: Using reduce()

The `reduce()` method can be used to extract a property into an array by accumulating values in an initial array. Iterate over each object, push the desired property into the accumulator, and return it. This method is concise and functional for such transformations.

Example:

const objectsArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const names = objectsArray.reduce((acc, obj) => {
  acc.push(obj.name);
  return acc;
}, []);
console.log(names); // ['Alice', 'Bob', 'Charlie']

[ 'Alice', 'Bob', 'Charlie' ]

Approach 4: Using for...of Loop

Using the for...of loop to extract property values involves iterating over the array of objects and pushing each object's property value into a new array. This method is straightforward and works well for simple extraction tasks.

Example

let objectsArray = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}];
let names = [];
for (let obj of objectsArray) {
  names.push(obj.name);
}
console.log(names); 

[ 'Alice', 'Bob', 'Charlie' ]