TypeError: filter is not a function in JavaScript

avatar

Borislav Hadzhiev

3 min

banner

Photo from Unsplash

# Table of Contents

  1. TypeError: filter is not a function in JavaScript
  2. TypeError: object.filter is not a function in JavaScript

# TypeError: filter is not a function in JavaScript

The "filter is not a function" error occurs when we call the filter() method on a value that is not of type array.

To solve the error, convert the value to an array before calling the filter method or make sure to only call the method on arrays.

typeerror filter is not a function

Here is an example of how the error occurs.

index.js
const arr = {}; // โ›”๏ธ Uncaught TypeError: arr.filter is not a function const result = arr.filter(element => element % 2 === 0);

We called the Array.filter() method on an object which caused the error.

To solve the error, console.log the value you're calling the filter method on and make sure it's a valid array.

index.js
const arr = [4, 6, 11]; const result = arr.filter(element => element % 2 === 0); console.log(result); // ๐Ÿ‘‰๏ธ [4, 6]

Alternatively, you can check if the value is an array by using the Array.isArray method.

index.js
const arr = null; const result = Array.isArray(arr) ? arr.filter(num => num % 2 === 0) : []; console.log(result); // ๐Ÿ‘‰๏ธ []

We used the ternary operator, which is very similar to an if/else statement.

If the value is an array, we return the result of calling the filter method, otherwise, we return an empty array.

This way, you won't get an error, even if the value is not an array.

If the value is fetched from a remote server, make sure it is of the expected type by logging it to the console. Also, make sure you have parsed it to a native JavaScript array before calling the filter method.

If you're trying to use the filter method on an object, use the Object.values() method to get an array of the object's values and call the filter method on the array.

index.js
const obj = {a: 2, b: 4, c: 13}; const values = Object.values(obj); console.log(values); // ๐Ÿ‘‰๏ธ [2, 4, 13] const result = values.filter(num => num % 2 === 0); console.log(result); // ๐Ÿ‘‰๏ธ [2, 4]

The Object.values() method returns an array of the object's values. We can then safely call the filter method on the array to filter out the results.

If you have an array-like object, use the Array.from() method to convert it to an array before calling the filter method.

index.js
const set = new Set([8, 2, 3]); const result = Array.from(set).filter(element => element % 2 === 0); console.log(result); // ๐Ÿ‘‰๏ธ [8, 2]

We converted the value to an array before calling the filter() method.

If the error persists, console.log the value you're calling the filter method on and make sure it's an array.

If the value is an object, you should probably be accessing a specific property that has an array value.

# TypeError: object.filter is not a function in JavaScript

The "object.filter is not a function" error occurs because the filter method is not implemented on an object.

To filter an object, use the Object.values() method to get an array of the object's values and call the filter() method on the array of values.

typeerror object filter is not a function

Here is an example of how the error occurs.

index.js
const obj = { user1: {id: 1, name: 'Alice'}, user2: {id: 2, name: 'Bob'}, user3: {id: 3, name: 'Charlie'}, }; // โ›”๏ธ TypeError: object.filter is not a function const result = obj.filter(value => { return value.id === 2; });

To solve the error, use the Object.values() method to get an array of the object's values and call the Array.filter() method on the array.

index.js
const obj = { user1: {id: 1, name: 'Alice'}, user2: {id: 2, name: 'Bob'}, user3: {id: 3, name: 'Charlie'}, }; // ๐Ÿ‘‡๏ธ [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, ...] console.log(Object.values(obj)); const result = Object.values(obj).filter(value => { console.log(value); return value.id === 2; }); // ๐Ÿ‘‡๏ธ [{id: 2, name: 'Bob'}] console.log(result);

The Object.values() method returns an array of the object's values, on which we can call the Array.filter() method.

The filter method returns a new array, which only contains the elements that satisfy the condition implemented by the provided function.

However, if you only need a single object, which matches a condition instead of an array of objects, you can use the Array.find() method.

index.js
const obj = { user1: {id: 1, name: 'Alice'}, user2: {id: 2, name: 'Bob'}, user3: {id: 3, name: 'Charlie'}, }; // ๐Ÿ‘‡๏ธ if you only need the object that matches the condition const found = Object.values(obj).find(value => { return value.id === 2; }); // ๐Ÿ‘‡๏ธ {id: 2, name: 'Bob'} console.log(found);

The find() method returns the first element (object) that meets the condition.

Note that if the callback function doesn't return a truthy value on any of the iterations, the find() method returns undefined.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev