Use array.some to return only matching sub-objects

Question

I have a list of requested colours that I am passing to a function:

const requestedColours = ['blue','green'];

I pass this into a function which contains an object with details of various colours:

colorOptions(requestedColours) {
    const options = {
        blue: {
            icon: 'sea.jpg',
            title: 'Sea Blue',
        },
        green: {
            icon: 'leaf.jpg',
            title: 'Leafy green',
        },
        pink: {
            icon: 'flower.jpg',
            title: 'Rose Pink',
        }
     }

    return options.some(requestedColours);
}

The following line I'm aware is incorrect:

return options.some(requestedColours);

However I also tried, for example:

return options.some('blue');

And this does not return the sub-object for blue, how do I correctly use array.some?

you are calling a function that's defined on `Array.prototype` on an object. — Cristian Lupascu, Jul 27 '17 at 11:01
But what do you want to get? Boolean or modified options object? — kind user, Jul 27 '17 at 11:02
@Kinduser modified options object with only the two requested colours — user1486133, Jul 27 '17 at 11:03
Possible duplicate of [JavaScript: filter() for Objects](https://stackoverflow.com/questions/5072136/javascript-filter-for-objects) — Cristian Lupascu, Jul 27 '17 at 11:08

kind user · Answer 1 · 2017-07-31T18:08:48.880

1

Array#reduce over requestedColours array.

Note: A wise idea would be also moving the options object outside the function.

const requestedColours = ['blue', 'green'];
const options = {
  blue: {
    icon: 'sea.jpg',
    title: 'Sea Blue',
  },
  green: {
    icon: 'leaf.jpg',
    title: 'Leafy green',
  },
  pink: {
    icon: 'flower.jpg',
    title: 'Rose Pink',
  }
};

const colorOptions = (obj, arr) => {
  return requestedColours.reduce((s, a) => {
    if (a in options) {
      s[a] = obj[a];
    }
    return s;
  }, {});
};

console.log(colorOptions(options, requestedColours));

edited Jul 31 '17 at 18:08

answered Jul 27 '17 at 11:08

kind user

40,029
7
67
77

This is pretty inefficient. Instead of looking at all keys and checking for each whether it is in the array, one could `reduce` over the selection array right away. – Bergi Jul 31 '17 at 16:50
@Bergi You're a genius. – kind user Jul 31 '17 at 18:08

score 0 · Answer 2 · answered Jul 27 '17 at 11:05

The some function takes a function and uses it to test each element of the array. It returns true if the function returns true for any element of the array. For example, if I wanted to check if an array contained at least one element that was greater than 5, I might try:

[1, 2, 5, 7].some(function(elem) { return elem > 5; })

I'm not too sure what you're trying to achieve in the above function, but I don't think the some function meets your needs.

user3297291 · Answer 3 · 2017-07-31T16:42:53.453

some is a method in the array prototype that takes a function and returns either true or false. It runs the function with the items in the array until it returns a truthy value. If none appears, it returns false.

If your goal is to see if the `requestedColors` are in `options`:

define a function that tells you if a key is in an object
pass this function to some

i.e.:

var requestedColours=["blue","green"];
var options={blue:{icon:"sea.jpg",title:"Sea Blue"},green:{icon:"leaf.jpg",title:"Leafy green"},pink:{icon:"flower.jpg",title:"Rose Pink"}};

var objectHasKey = obj => key => key in obj;

console.log(
  requestedColours.some(objectHasKey(options))
);

If your goal is to create an array of requested options:

define a function that retrieves a property's value from an object
use map to map from key to option
filter out options that don't exist

var requestedColours=["red", "blue","green"];
var options={blue:{icon:"sea.jpg",title:"Sea Blue"},green:{icon:"leaf.jpg",title:"Leafy green"},pink:{icon:"flower.jpg",title:"Rose Pink"}};

var getKey = obj => key => obj[key];

console.log(
  requestedColours
    .map(getKey(options))
    .filter(opt => opt)
);

If your goal is to create a new options object with only the requested colours:

You can do this in one loop, using one reduce method:

Reduce requestedColours
Retrieve the options object from options using the key
Merge it with the accumulator you pass along in the reducer

const requestedColours = ['blue', 'green'];
const options = {
  blue: {
    icon: 'sea.jpg',
    title: 'Sea Blue',
  },
  green: {
    icon: 'leaf.jpg',
    title: 'Leafy green',
  },
  pink: {
    icon: 'flower.jpg',
    title: 'Rose Pink',
  }
}

const pickedColors = requestedColours.reduce(
  (picked, key) => Object.assign(picked, { [key]: options[key] }),
  {}
);

console.log(pickedColors);

Use array.some to return only matching sub-objects

3 Answers3

If your goal is to see if the requestedColors are in options:

If your goal is to create an array of requested options:

If your goal is to create a new options object with only the requested colours:

If your goal is to see if the `requestedColors` are in `options`: