Photo by Didssph on Unsplash

JavaScript quick-tip: filtering an object for a value contained in an array within

It sounds weird, but sometimes you need to filter an object according to some value contained in an array within its props. Check out one easy-peasy way to solve this.

Let’s say you own a “Magazines and Newspapers” website that sells subscriptions. And you are designing a level-up subscription page in which you will show all the non-free plans your company offers.

It should be as easy as calling your endpoint with the subscriptions info and paint it out with a map() function and some .jsx . But… what if the response returns more info that you actually do not want?

It’s time to do some cleaning. Filtering is often pretty straight-forward with the filter() functions of JavaScript ES6. But this only works with arrays.

In our case, our API is returning an object with the different products we offer. Every product owns an array of properties describing the different pass or subscription options available. Like this:

{
      cool_magazine: [
        {
          id: 'free-pass',
          label: 'Free Pass'
        },
        {
          id: 'seasons-pass',
          label: 'Seasons Pass'
        }
      ],
				
      boring_newspaper: [
        {
          id: 'free-pass',
          label: 'Free Pass'
        },
        {
          id: 'seasons-pass',
          label: 'Seasons Pass'
        }
      ]
 };

We need to get rid of those “free-pass” subscriptions within the arrays of each object’s props. Sounds like a lot of nesting, and it is! But let’s create a function that returns an already filtered object we can render on our website:

Let’s break this down:

1. Let’s create a brand new clean object that will hold the final results of the cleaning. For this, we replicate the original object structure by using Object.assign() . This will make an exact copy of productPass but all the values will be empty.
2. We need to iterate throughout all the props of our original object of products in order to perform some stuff. But since objects are not iterable, we need to make an iterator with Object.keys() . This function will virtually create an array with the keys of our object: ['cool_magazine', 'boring_newspaper'] allowing us to use the array methods that JS has.
3. Now that we have an array, we will iterate through each key with the forEach() method.
4. As our key corresponds to the product’s name both in newData and productPass we can use it to directly locate the array of props of each product with filter()
5. We can finally filter the array within each product and extract only those that do not contain the ‘free’ word in it. Plain old includes() function here.

So, with this function up and running you just need to process your object, JSON, or API response before using it or storing it in your Redux store.

Big shout out and thanks to Miguel A Gutiérrez that was the big brain behind this easy but tricky solution.

Peace & Code

Nadine