How to filter values from an array in TypeScript?

In this tutorial, users will learn to filter the values from the array in TypeScript. The filter is an important operation to manipulate the data we get from the database.

For example, everyone has seen the filter on the Amazon, Flipkart, etc. websites to filter the products according to different criteria. To create something like that, either we can get the filtered data from the database directly, or we can get the whole data and filter at the frontend side from the array of the products, and it depends on some criteria such as database size, performance, etc.

Use the Array.filter() Method

The filter() methods of the array allow us to filter the different values from the array based on certain single or multiple conditions. It takes the callback function as a parameter. Users can execute certain conditions in the callback function for every array element. If the callback function returns true for a particular element, the filter() method contains that element in the resultant array.

Syntax

Users can follow the syntax below to use the filter() method to filter the values from the array.

let array: Array<number> = [10, 20, 30, 54, 43, 32, 90, 80];
let result: Array<number> = array.filter(callback_func(element, index, array) {
   // condition to filter values
});

In the above syntax, we have created the array and invoking the filter method by taking the array as a reference.

Parameters

• callback_func − It is a function that contains the condition to filter the array values. The condition of the callback function returns the boolean values based on whether the current element matches the condition.

• element − It is an element of the array.

• index − It is an index of the element.

• array − It is a current array on which we apply the filter() method.

Example 1

In the example below, we have created an array of numbers. We want to filter all values from the array divisible by 10. In the filter method, we passed the arrow function as a callback which returns true if the current element is divisible by 10. Otherwise, it returns false.

The results array will contain all elements for which the condition of the callback function will be true that users can observe in the output.

let array: Array<number> = [10, 20, 30, 54, 43, 32, 90, 80];
// Filter the all values which are divisible by 10.
let result: Array<number> = array.filter(
   //  arrow function as a callback function
   (element, index, array) => {
      // If element is divided by 10, return true else return false.
      if (element % 10 == 0) {
         return true;
      }
      return false;
   }
);
console.log("All filtered values are " + result);

On compiling, it will generate the following JavaScript code −

var array = [10, 20, 30, 54, 43, 32, 90, 80];
// Filter the all values which are divisible by 10.
var result = array.filter(
//  arrow function as a callback function
function (element, index, array) {
   // If element is divided by 10, return true else return false.
   if (element % 10 == 0) {
      return true;
   }
   return false;
});
console.log("All filtered values are " + result);

Output

The above code will produce the following output −

All filtered values are 10,20,30,90,80

Example 2

In the example below, we have created an array of objects which contains the name and programming language as a member. After that, we use the filter method to filter the objects from the array, which contains “c++” as a programming language.

Next, we are iterating through the ‘CppTutors’ array to print all objects which contain language as a “c++”.

// Array of objects containing the name, and programming language
let tutors: Array<{ name: string; language: string }> = [];
// Push some records to the array
tutors.push({ name: "Jems", language: "C++" });
tutors.push({ name: "Bond", language: "Python" });
tutors.push({ name: "Trump", language: "C++" });
tutors.push({ name: "Alice", language: "Java" });
tutors.push({ name: "Nerd", language: "C" });
//  Filter all the CPP tutors.
const Cpptutors = tutors.filter((tutor, index) => {
   return tutor.language == "C++";
});
// Printe the name of all CPP tutors.
for (let tutor of Cpptutors) {
   console.log(tutor.name + " is a CPP tutor.");
}

On compiling, it will generate the following JavaScript code −

// Array of objects containing the name, and programming language
var tutors = [];
// Push some records to the array
tutors.push({ name: "Jems", language: "C++" });
tutors.push({ name: "Bond", language: "Python" });
tutors.push({ name: "Trump", language: "C++" });
tutors.push({ name: "Alice", language: "Java" });
tutors.push({ name: "Nerd", language: "C" });
//  Filter all the CPP tutors.
var Cpptutors = tutors.filter(function (tutor, index) {
   return tutor.language == "C++";
});
// Printe the name of all CPP tutors.
for (var _i = 0, Cpptutors_1 = Cpptutors; _i < Cpptutors_1.length; _i++) {
   var tutor = Cpptutors_1[_i];
   console.log(tutor.name + " is a CPP tutor.");
}

Output

The above code will produce the following output −

Jems is a CPP tutor.
Trump is a CPP tutor.

Custom Algorithm to Filter the Array Values

In this method, we will simply iterate through every element of the array. For every element, we will check that if the element meets the filtering condition, we will push it to the filter array.

Syntax

Users can follow the syntax below to use the custom algorithm to filter the array values.

// Iterate through every element of the array.
for (let i = 0; i < array.length; i++) {
   // condition to filter values.
   if () {
   // if the condition meets, push the element to filteredValues array.
      filteredValues.push(array[i]);
   }
}

Algorithm

Users can follow the below algorithm for the above syntax.

STEP 1 − Create the array to store the filtered values.

STEP 2 − Use the for loop to iterate through every array element.

STEP 3 − If the filtering condition meets the element, push it to the filter array.

STEP 4 − The filtered array contains every value that meets the filtering condition.

Example

In the example below, we have created an array of ages. Simply, we have applied the above algorithm to filter all ages which are above 18.

// Array of ages
let ages: Array<number> = [32, 12, 34, 54, 65, 76, 21, 11, 4, 34, 32];
// array to store all ages above 18
let above18: Array<number> = [];
// Iterate through ages and filter all ages above 18.
for (let i = 0; i < ages.length; i++) {
   if (ages[i] > 18) {
      // push all ages, which are above 18 to above18 array.
      above18.push(ages[i]);
   }
}

// Print all ages above 18.
console.log("All ages above 18.");
console.log(above18);

On compiling, it will generate the following JavaScript code −

// Array of ages
var ages = [32, 12, 34, 54, 65, 76, 21, 11, 4, 34, 32];
// array to store all ages above 18
var above18 = [];
// Iterate through ages and filter all ages above 18.
for (var i = 0; i < ages.length; i++) {
   if (ages[i] > 18) {
      // push all ages, which are above 18 to above18 array.
      above18.push(ages[i]);
   }
}
// Print all ages above 18.
console.log("All ages above 18.");
console.log(above18);

Output

The above code will produce the following output −

All ages above 18.
[ 32, 34, 54, 65, 76, 21, 34, 32 ]

Users learned to filter values in Typescript in this tutorial. In the first example, the user learned to use the filter method to filter the values from the array. Also, users learned to filter the objects according to the member value using the filter method.

At last, we created the custom algorithm to filter the values, which also represents how the filter() method is implemented in the Array class.