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

In this, 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:

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

Javascript

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:

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

Javascript

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 ]