Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

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  

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.


0replies
Leave a reply
47
Registerd Users
89
Total Subscribers
59
Total Articles
46275
Total Views