Filtering an array’s objects, based on a value in a key value array, using filter() and includes(), with JavaScript

Image of a laptop with some code, open, with a notebook and pen on top. (Photo by Tracy Adams on Unsplash)

We’ve all been there. We can’t figure out why our code isn’t working, and it’s time to Google it. But the examples we find are often one step short of the answer we need.

There are many examples online about targeting specific objects in an array of objects, based on specific key value pairs. But that’s as deep as the common examples go. This leaves us one step short in situations where the key value pair has an array of values.

This article takes the next step and shows how to filter objects in an array, based on values in a key value array. There’s also a link to a full code sample at the end.

Reviewing What We Know

So we know how to find objects in an array of objects with a specific key value pair, but let’s review just in case.

Let’s say we’re working with a recreation centre on their booking website. A customer wants to book a kid’s party and they know there will be 15 kids attending.

const recActivities = [
    { name:’Swimming’, ages: [6, 7, 8], maxCap: 10 },
    { name:’Skating’, ages: [8, 9, 10], maxCap: 20 },
    { name:’Open Gym’, ages: [10, 11, 12], maxCap: 30 }
];
const largeGroup = recActivities.filter(activity => (activity.maxCap > 15)); 

We want to find all the activities that can accomodate 15 or more kids.

Using a basic filter() method, we go over each object in the array and evaluate whether or not each activity’s max capacity (key value pair maxCap) can handle 15 kids. If the value is greater than 15 kids, we keep the activity as a result in our new largeGroup array.

Easy, right? Cool. Moving on…

The Deeper Problem

Ok, now let’s say that we need to filter() the rec centre activities to find something age appropriate instead. We want to filter() the objects in the recActivities array to find only the ones that are for a specific age. But we can’t search through key value pairs that contain arrays the same way as we do above.

So how do we do it?

The Solution

In comes the includes() method. It will find out if a certain value exists in an array, and return true or false. So combined with filter(), we can work some search magic:

const recActivities = [
    { name:’Swimming’, ages: [6, 7, 8], maxCap: 10 },
    { name:’Skating’, ages: [8, 9, 10], maxCap: 20 },
    { name:’Open Gym’, ages: [10, 11, 12], maxCap: 30 }
];
const ageAppropriate = recActivities.filter(activity => (activity.ages.includes(8)));

Let’s break this down.

const ageAppropriate = : This is where we create a variable called ageAppropriate where our new array of age appropriate activity objects will live.

recActivities.filter : This is how we filter() our existing array of activities and create the new array of only the objects that pass a test (that’s next!).

(activity => (activity.ages.includes(8))); : This is the function/test we are running on each activity (each object in the recActivities array). For each object key “ages”, we run the includes() method over the array of values. If it contains the value we’re looking for, in this case the integer 8 (for 8 years old), then it will keep that object for the new array because it returned true (meaning it passed the test).

If we console.log(ageAppropriate), the array will only contain the activities that are appropriate for kids who are the age of 8.

That’s it!

To see a full code sample, go here.

To read more about the filter() method, check out the MDN docs here.

To read more about the includes() method, check out the MDN docs here.

Good luck!