Share with
Filter array object list using JavaScript.
Using JavaScript language, we are filtering the array list items for search or sorting the list using some javascript functions.
JavaScript Array Filters
Using JavaScript language, we are filtering the array list items for search or sorting the list using some javascript functions.
The most common task in programming is filtering and searching the list of available items in the array.
We have city multiple objects in array list contains name and population.
let cities = [
{name: 'Los Angeles', population: 3792621},
{name: 'New York', population: 8175133},
{name: 'Chicago', population: 2695598},
{name: 'Houston', population: 2099451},
{name: 'Philadelphia', population: 1526006}
];
Ex. To find the cities whose population greater than 3 lakhs.
Solution 1.
Using for loop and if condition we can iterate the array and by applying if condition we can push the finding value in a new array.
let bigCities = [];
for (let i = 0; i < cities.length; i++) {
if (cities[i].population > 3000000) {
bigCities.push(cities[i]);
}
}
console.log(bigCities);
Output:
[
{ name: 'Los Angeles', population: 3792621 },
{ name: 'New York', population: 8175133 }
]
Solution 2.
Using built-in filter() in javascript ES5
let bigCities = cities.filter(function (e) {
return e.population > 3000000;
});
console.log(bigCities);
Output:
[
{ name: 'Los Angeles', population: 3792621 },
{ name: 'New York', population: 8175133 }
]
Solution 3.
Using built-in filter() in javascript ES6 it is very simple in one line using the arrow (=>) method.
let bigCities = cities.filter(city => city.population > 3000000);
console.log(bigCities);
Output:
[
{ name: 'Los Angeles', population: 3792621 },
{ name: 'New York', population: 8175133 }
]
Javascript filter() Syntax:
arrayObject.filter(callback, contextObject);
The filter()
method creates a new array with all the elements that pass the test implemented by the callback()
function.
Thank you for watching the article.
If you like please like and share with your developer friends.
Related Post :
Open model popup in Angular 6 | 7 | 8 | 9 using @ng-bootstrap NgbModal
How to install angular 8 in windows operating system.
Design student simple database using slick carousel implementation in angular 7 with firebase.
How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4
Design custom bootstrap 4 pagination for angular project instead of using 3rd party pagination
How to install @ng-bootstrap to angular cli and uses of @ng-bootstrap
Install Node JS in windows machine and set environment path in settings.
Leave a reply

Sign in to stay updated on your professional world.
Pro Code Programming
Share and learn to code!
Programming articles, which helps you to build your application.
If something you are stuck to code and complete the program, just find here your quetion related articles.
New to Pro Code Programming?