javascript: filter objects by multiple values with array using a functional approach

Question

I am trying to search a list of objects using a list of values and a list of keys. My first approach is to create a list of objects given a particular value. However, the key is hard-coded and I should be using a more functional approach. Next, I think I should create a list of objects after filtering for each value. However, I am again hard-coding the values. I am not sure how to pass a list of values and a list of keys such as the following. Should I have used a Map object? if so, how can I extract the following two variables?:

const list_of_keys = ['color_1', 'color_2', 'color_3']
const list_of_values =  ['red','blue','purple']`

const data = [
    {make: 'ford',model: 'mustang',color_1: 'red',color_2: '',color_3: ''},
    {make: 'ford',model: 'escape',color_1: '',color_2: 'blue',color_3: ''},
    {make: 'ford',model: 'expedition',color_1: '',color_2: '',color_3: 'purple'},
    {make: 'mercedez',model: 'helicopter',color_1: '',color_2: '',color_3: 'orange'}
]

// hard-coded object keys
const filter_by_multiple_keys = (carObject, Value) => carObject.filter(car =>
    car.color_1 === Value ||
    car.color_2 === Value ||
    car.color_3 === Value
    );

// hard-coded values
const filterByColorsObject = list_of_objects => {

    const dataArray = [];

    dataArray.push(filter_by_multiple_keys(list_of_objects, 'red'));
    dataArray.push(filter_by_multiple_keys(list_of_objects, 'blue'));
    dataArray.push(filter_by_multiple_keys(list_of_objects, 'purple'));

    return(dataArray)

}

console.log(filterByColorsObject(data))

CertainPerformance · Accepted Answer · 2020-02-29 22:56:44Z

2

Creating an array of the key names is the right idea - check if .some of them, when that property is accessed on the object, are equal to the value:

const filter_by_multiple_Columns = (carObject, value) => carObject.filter(
  car => list_of_keys.some(
    key => car[key] === value
  )
);

To construct multiple columns, .map from the list_of_values array:

const filterByColorsObject = list_of_objects => list_of_values.map(
  value => filter_by_multiple_Columns(list_of_objects, value)
);

But this is an extremely strange data structure. If at all possible, change the colors properties to an array, instead of multiple separate properties:

{ make: 'mercedez',model: 'helicopter', colors: ['', '', 'orange'] }

or

{ make: 'mercedez',model: 'helicopter',colors: ['orange'] }

This would make them much easier to iterate over. For the above, you would do:

const filter_by_multiple_Columns = (carObject, Value) => carObject.filter(
  car => car.colors.includes(Value)
);

answered Feb 29, 2020 at 22:56

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Oscar Evolves Over a year ago

That's a good point. I shall fix my data structure. Thank you!

Oscar Evolves Over a year ago

What's interesting about your filter_by_multiple_Columns function @CertainPerformance, is that it returns three lists in this case. I am assuming one for each item on the list. Is there a clean way you would recommend to merge the three lists? Thank you

CertainPerformance Over a year ago

That's the same thing your original filterByColorsObject was doing - you created an array and pushed an array to it 3 times, so I thought that's what you wanted. If you want all items to be collected into a single array, use .flatMap instead of .map for filterByColorsObject, so the results get flattened.

CertainPerformance Over a year ago

Another suggestion, if you don't mind - it would probably be a lot easier to read and write if one follows the usual convention of always using camelCase for ordinary variables, rather than using mixed styles (resulting in having to double check which style and casing the variable is using every time)

Oscar Evolves Over a year ago

Thank you, this is much appreciated. I'll keep my styles consistent too.

|

Collectives™ on Stack Overflow

javascript: filter objects by multiple values with array using a functional approach

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related