Getting the values for a specific key from all objects in an array

Question

I'm running an express.js app that has a few apis feeding data to dropdown boxes. The data returned is in the form:

  [
    {
        key: 'blah',
        value: 'Blah Blah'
    },
    {
        key: 'foo',
        value: 'Foos'
    },
    {
        key: 'bar',
        value: 'Bars'
    },
    {
        key: 'baz',
        value: 'Bazingo'
    }
];

where key is my option key and value is the display text. The structure of this array is fixed and I know for a fact that I'll always have key and value as the fields in each object in the array.

When I try to validate the form submitted (additional server side validation), I'd like to cross-reference the value provided for a field against all the values for "key" in the array (blah, foo, bar, baz). Given that this is going to be a frequently used route, I'd like to avoid iterating over the array to find the permitted values, every single time. Is there a simpler way to do this? In other words, I know I can use:

 permittedValues = [];
 for (i = 0; i < array.length; i++){
    permittedValues[i] = array[i]["key"];
 }

but I'd like to avoid this for loop, if possible.

P.S: This seems to be a fundamental question and the answers I found online didn't exactly answer my question. So, apologies if this has already been asked and answered.

Solution 1

You could map:

permittedValues = array.map(function(value) {
  return value.key;
});

In ES6/ES2015 it's even prettier with arrow functions:

permittedValues = array.map(value => value.key);

It might be prettier, but it's probably not faster than a for() loop.

Solution 2

Using lodash,

Since lodash 4.x the _.pluck function has been removed in support to map function.

so you can achieve the desired task by:

import _ from 'lodash'
_.map(items, 'key');

Ref: What happened to Lodash _.pluck?

Solution 3

Pure Javascript ES6

array.map(value => value.key);

Underscore/Lodash

_.map(value,'key')

Solution 4

If you are using ES6 javascript version you can do something like the one below:

const arrayData = [
    {
        key: 'blah',
        value: 'Blah Blah'
    },
    {
        key: 'foo',
        value: 'Foos'
    },
    {
        key: 'bar',
        value: 'Bars'
    },
    {
        key: 'baz',
        value: 'Bazingo'
    }
];
const foodBar = arrayData.find(item => item.key === "baz");
const resultValue = foodBar['value']; // here the extracted value is by key

View more solutions

Comments

[idmean]

It's not possible without a loop.

[Mritunjay]

you can use underscore pluck, but anyway internally it'll be using some loop.

[adelriosantiago]

_.pluck is no longer a lodash function =(