Using Array.map(), to extract values from array of key:value objects-CodePudding

I have been able to use the following code to extract values for a list of specific keys from an array of objects.

let keys = ['name', 'age'];
let employees = [
  {name: 'Matt', employeeID: 123, performance: 'good', age: 21},
  {name: 'Brian', employeeID: 321, performance: 'average', age: 32},
  {name: 'David', employeeID: 456, performance: 'best', age: 35},
  {name: 'Kevin', employeeID: 654, performance: 'poor', age: 38},
  {name: 'Barrack', employeeID: 789, performance: 'super', age: 47},

];

let extracted = employees.map(object => keys.map(element => object[element]));
console.log(extracted); //result is [[Matt, 21.0], [Brian, 32.0], [David, 35.0], [Kevin, 38.0], [Barrack, 47.0]]

I have a hard time understanding conceptually how using two Array.map() methods nested within each other works like this. Can somebody walk me through how this actually works? For instance if I want to use only one Array.map() method to recreate the above, I end up with an array of truncated objects that still includes key:value pairs.

let truncated = employees.map(({name, age, ...rest}) => ({name, age}));
console.log(truncated); //result is [{age=21.0, name=Matt}, {age=32.0, name=Brian}, {age=35.0, name=David}, {name=Kevin, age=38.0}, {age=47.0, name=Barrack}]

CodePudding user response：

On the first iteration of employees.map(), object is the object

{name: 'Matt', employeeID: 123, performance: 'good', age: 21}

We then execute keys.map().

On the first iteration, element is 'name', and we return object[element], which is 'Matt'. On the second iteration, element is 'age', and we return object[element], which is 21. map() combines these results into the array ['Matt', 21].

We then repeat the above for each object in the employees array, and make a list of all these results. This produces an array of arrays.

CodePudding user response：

Array map takes an array of elements and transforms each element using the supplied function -

// input
[1,3,5,7].map(a => a   10)

input	a => a 10	output
`1`	`1 10`	`11`
`3`	`3 10`	`13`
`5`	`5 10`	`15`
`7`	`7 10`	`17`

// output
[11,13,15,17]

Now we look at it with a more simplified view -

// in       // out
[           [ 
  1,  // =>   11,
  3,  // =>   13,
  5,  // =>   15,
  7,  // =>   17
]           ]

And now expand it with a level of nesting using your objects -

[
  {
    name: 'Matt',          // [            [
    employeeID: 123,       //   "name", =>   "Matt",
    performance: 'good',   //   "age"        21
    age: 21                // ]            ]
  },
  {
    name: 'Brian',          // [            [
    employeeID: 321,        //  "name", =>    "Brian",
    performance: 'average', //  "age"         32
    age: 32                 // ]            ]
  },
  {
    name: 'David',          // [            [
    employeeID: 456,        //  "name", =>    "David",
    performance: 'best',    //  "age"         35
    age: 35                 // ]            ]
  },
  {
    name: 'Kevin',          // [            [
    employeeID: 654,        //  "name", =>    "Kevin",
    performance: 'poor',    //  "age"         38
    age: 38                 // ]            ]
  },
  {
    name: 'Barrack',        // [            [
    employeeID: 789,        //  "name", =>    "Barrack",
    performance: 'super',   //  "age"         47
    age: 47                 // ]            ]
  }
]

[
  [
    "Matt",
    21
  ],
  [
    "Brian",
    32
  ],
  [
    "David",
    35
  ],
  [
    "Kevin",
    38
  ],
  [
    "Barrack",
    47
  ]
]

[
  ["Matt",21],
  ["Brian",32],
  ["David",35],
  ["Kevin",38],
  ["Barrack",47]
]

CodePudding user response：

You end up with a nested array because both maps return arrays. Your "inner" map returns an array of values based on the keys array, and that is returned to the "outer" map that's been iterating over the array of each object, which also returns an array.

// Create a new array by mapping over each object
employees.map(object => {
  
  // For each key in the keys array return a
  // new array of only those values of the
  // properties of the object that match the key
  return keys.map(element => object[element]);
});

CodePudding user response：

let keys = ['name', 'age'];
let employees = [
  {name: 'Matt', employeeID: 123, performance: 'good', age: 21},
  {name: 'Brian', employeeID: 321, performance: 'average', age: 32},
  {name: 'David', employeeID: 456, performance: 'best', age: 35},
  {name: 'Kevin', employeeID: 654, performance: 'poor', age: 38},
  {name: 'Barrack', employeeID: 789, performance: 'super', age: 47},

];

let extracted = employees.flatMap(object => keys.map(element => object[element]));
console.log(extracted);

What you are looking for should be a flatMap