Filter array of objects based on values in second array

Question

I have an array of objects that I'd like to filter to create a new array based on whether or not the value of any key matches any value in another array.

const array1 = [{name: 'pink', id: 13}, {name: 'orange', id: 17}, {name: 'red, id: 64}, {name: 'purple', id: 47}, {name: 'yellow', id: 23}, {name: 'gray', id: 2}, {name: 'black', id: 200}, {name: 'violet', id: 4}]

const array2 = ['red', 'blue', 'green', 'pink']

I've tried using a for...of loop inside of a return function but that is giving me errors.

    const array3 = array1.filter(color => {
        for (mainColor of array2){
            return color.name === mainColor 
        }
    });

This works but is clearly not the best way.

    const array3 = array1.filter(color => {
            return (color.main === 'red') || (color.main === 'blue')
        });

How can I get a third array from array1 that contains only the objects where the array1.name matches a value in array2?

Is it possible with ES6 or Lodash?

Thanks in advance!

Answer 1

Almost there, instead of for-loop use includes and return

const array3 = array1.filter(color => {
    return array2.includes ( color.name );
});

Or

const array3 = array1.filter( color => array2.includes ( color.name ) );

Answer 2

Let me give an alternative, that has slightly more code, but is more efficient as well, as it only needs to scan array2 once:

 const array1 = [{name: 'pink', id: 13}, {name: 'orange', id: 17}, {name: 'red', id: 64}, {name: 'purple', id: 47}, {name: 'yellow', id: 23}, {name: 'gray', id: 2}, {name: 'black', id: 200}, {name: 'violet', id: 4}], array2 = ['red', 'blue', 'green', 'pink']; const colorSet = new Set(array2), array3 = array1.filter(color => colorSet.has(color.name)); console.log(array3); 

Answer 3

Try the following with Array's includes() :

 const array1 = [{name: 'pink', id: 13}, {name: 'orange', id: 17}, {name: 'red', id: 64}, {name: 'purple', id: 47}, {name: 'yellow', id: 23}, {name: 'gray', id: 2}, {name: 'black', id: 200}, {name: 'violet', id: 4}] const array2 = ['red', 'blue', 'green', 'pink']; const array3 = array1.filter(color => array2.includes(color.name)); console.log(array3); 

Answer 4

The filter method already iterates on each item. You just have to return true if the element is present in the second array (by using indexOf or includes )

 const array1 = [{name: 'pink', id: 13}, {name: 'orange', id: 17}, {name: 'red', id: 64}, {name: 'purple', id: 47}, {name: 'yellow', id: 23}, {name: 'gray', id: 2}, {name: 'black', id: 200}, {name: 'violet', id: 4}] const array2 = ['red', 'blue', 'green', 'pink']; let filteredArray = array1.filter(e => array2.indexOf(e.name) > -1); console.log(filteredArray); 

Answer 5

I know indexOf might seem a little outfashioned and ES5-ish, but it still does the job:

 const array1 = [{name: 'pink', id: 13}, {name: 'orange', id: 17}, {name: 'red', id: 64}, {name: 'purple', id: 47}, {name: 'yellow', id: 23}, {name: 'gray', id: 2}, {name: 'black', id: 200}, {name: 'violet', id: 4}], array2 = ['red', 'blue', 'green', 'pink']; let array3 = array1.filter(x => array2.indexOf(x.name) != -1) console.log(array3)