Typescript filter array of objects

One of the regular tasks you will encounter while working in a TypeScript application is filtering arrays, including arrays of objects. In this tutorial, I will explain how to filter arrays of objects in TypeScript with a few examples.

To filter an array of objects in Typescript, you can use the filter() method, where you can specify conditions based on the object properties. For instance, if you have an array of city objects in the USA, you can filter cities with a population over a certain number with cities.filter(city => city.population > 3000000).

TypeScript Filter Array

Filtering an array in TypeScript is straightforward. The filter() method in Typescript creates a new array with all elements that pass the test implemented by the provided function.

Here is an example of how to filter an array in Typescript.

const cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix'];

const filteredCities = cities.filter(city => city.length > 7);

console.log(filteredCities);

Now, when I ran the code using Visual Studio Code, it gave me a result whose length is > 7; check the screenshot below.

Typescript filter array of objects

We can also easily filter an array of objects in Typescript; here is a complete code and example of how to filter an array of objects in Typescript using the filter() function.

interface City {
    name: string;
    population: number;
}

const cities: City[] = [
    { name: 'New York', population: 8419000 },
    { name: 'Los Angeles', population: 3971000 },
    { name: 'Chicago', population: 2716000 }
];

const largeCities = cities.filter(city => city.population > 3000000);
console.log(largeCities);

Output:

[ 'New York', 'Los Angeles' ]

After I ran the code using Visual Studio Code, the output looked like the screenshot below.

TypeScript Filter Array of Objects Multiple Values

If you want to filter an array of objects based on multiple values in Typescript, then you can use the below Typescript code:

interface City {
    name: string;
    population: number;
}

const cities: City[] = [
    { name: 'New York', population: 8419000 },
    { name: 'Los Angeles', population: 3971000 },
    { name: 'Chicago', population: 2716000 }
];

const diverseCities = cities.filter(city => city.population > 2000000 && city.name.startsWith('N'));
console.log(diverseCities);

Output:

Once you run the code using visual studio code, you can see the output in the screenshot below.

[ { name: 'New York', population: 8419000 } ]

Typescript filter array of objects by key

You can also easily filter an array of objects by a specific key in Typescript. Here is a complete code:

interface City {
    name: string;
    population: number;
}

const cities: City[] = [
    { name: 'New York', population: 8419000 },
    { name: 'Los Angeles', population: 3971000 },
    { name: 'Chicago', population: 2716000 }
];

const citiesWithKey = cities.filter(city => 'population' in city);
console.log(citiesWithKey);

Output:

[
  { name: 'New York', population: 8419000 },
  { name: 'Los Angeles', population: 3971000 },
  { name: 'Chicago', population: 2716000 }
]

Here, it returns all cities as all have ‘population’ key; check out the screenshot below:

Typescript filter array of objects by value

Like by key, you can filter an array of objects by value in Typescript. Here is a complete code to filter array of objects by value in Typescript.

interface City {
    name: string;
    population: number;
}

const cities: City[] = [
    { name: 'New York', population: 8419000 },
    { name: 'Los Angeles', population: 3971000 },
    { name: 'Chicago', population: 2716000 }
];

const specificValueCities = cities.filter(city => city.name === 'Chicago');
console.log(specificValueCities);

Output:

You can see in the screenshot below it returns the items whose name are ‘Chicago’.

[ { name: 'Chicago', population: 2716000 } ]

Typescript filter array of objects by property

Filtering by a certain property within objects is very similar to filtering by value but focuses more on the property’s existence and type. Here is the complete code for the Typescript filter array of objects by property.

interface City {
    name: string;
    population: number;
}

const cities: City[] = [
    { name: 'New York', population: 8419000 },
    { name: 'Los Angeles', population: 3971000 },
    { name: 'Chicago', population: 2716000 }
];
const citiesWithPopulationProperty = cities.filter(city => typeof city.population === 'number');
console.log(citiesWithPopulationProperty);

Output:

[  
  { name: 'New York', population: 8419000 },
  { name: 'Los Angeles', population: 3971000 },
  { name: 'Chicago', population: 2716000 }
]

Check out the screenshot below:

TypeScript Filter Array of Objects by Property Value

Filtering by a specific property value combines the techniques of property and value filtering. Here is a complete code for the Typescript filter array of objects by property value.

interface City {
    name: string;
    population: number;
}

const cities: City[] = [
    { name: 'New York', population: 8419000 },
    { name: 'Los Angeles', population: 3971000 },
    { name: 'Chicago', population: 2716000 }
];
const citiesWithHighPopulation = cities.filter(city => city.population && city.population > 5000000);
console.log(citiesWithHighPopulation);

Output:

[ { name: 'New York', population: 8419000 } ]

Once you run the code using VS code, you can see the output in the screenshot below:

Typescript filter array of objects contains

When you need to check if an array of objects contains a certain value in Typescript, the some() method can be used in conjunction with the filter; here is the complete code for how to filter the array of objects contains in Typescript.

interface City {
    name: string;
    population: number;
}

const cities: City[] = [
    { name: 'New York', population: 8419000 },
    { name: 'Los Angeles', population: 3971000 },
    { name: 'Chicago', population: 2716000 }
];
const citiesContainingLos = cities.filter(city => city.name.includes('Los'));
console.log(citiesContainingLos);

Output:

[ { name: 'Los Angeles', population: 3971000 } ]

After executing the code using VS code, it shows the output where the name contains “Los”.

Conclusion

I hope you have learned many things about “typescript filter array’, especially how to filter an array of objects in Typescript. And also here are a few examples that we covered in this tutorial.

• typescript filter array of objects
• typescript filter array of objects multiple values
• typescript filter array of objects by key
• typescript filter array of objects by value
• typescript filter array of objects by property
• typescript filter array of objects by property value
• typescript filter array of objects contains

You may also like:

• Typescript array find
• Typescript sort array
• How to reverse an array in Typescript
• Typescript array concatenation