javascript filter array multiple conditions

Question

I want to simplify an array of objects  Let s assume that I have following array   var users          name   John       email   johnson mail com       age  25      address   USA                       name   Tom           email   tom mail com           age  35          address   England                       name   Mark           email   mark mail com           age  28          address   England        And filter object   var filter    address   England   name   Mark      For example i need to filter all users by address and name  so i do loop through filter object properties and check it out   function filterUsers  users  filter        var result           for  var prop in filter            if  filter hasOwnProperty prop                    at the first iteration prop will be address             for  var i   0  i  lt  filter length  i                      if  users i  prop      filter prop                         result push users i                                                        return result      So during first iteration when prop - address will be equal  England  two users will be added to array result  with name Tom and Mark   but on the second iteration when prop name will be equal Mark only the last user should be added to array result  but i end up with two elements in array    I have got a little idea as why is it happening but still stuck on it and could not find a good solution to fix it  Any help is appreciable  Thanks

User · Answer

You ll have more flexibility if you turn the values in your filter object into arrays  var filter    address    England    name    Mark       That way you can filter for things like  quot England quot  or  quot Scotland quot   meaning that results may include records for England  and for Scotland  var filter    address    England    Scotland    name    Mark       With that setup  your filtering function can be   x000D   x000D  const applyFilter    data  filter    gt  data filter obj   gt      Object entries filter  every   prop  find     gt  find includes obj prop           demo var users     name   John  email   johnson mail com  age  25 address   USA    name   Tom  email   tom mail com  age  35 address   England    name   Mark  email   mark mail com  age  28 address   England    var filter    address    England    name    Mark      var filter    address    England    name    Mark       console log applyFilter users  filter    x000D   x000D   x000D

User · Answer

I think this might help   x000D   x000D  const filters     a    b     const results             name   Result 1       category    a                name   Result 2       category    a    b                name   Result 3       category    c    a    b    d           const filteredResults   results filter item   gt    filters every val   gt  item category indexOf val   gt  -1      console log filteredResults      x000D   x000D   x000D

User · Answer

Using Array Filter   with Arrow Functions we can achieve this using     users   users filter x    x name     Mark   amp  amp  x address     England      Here is the complete snippet   x000D   x000D     initializing list of users x000D  var users      x000D      name   John   x000D      email   johnson mail com   x000D      age  25  x000D      address   USA  x000D       x000D      x000D      name   Tom   x000D      email   tom mail com   x000D      age  35  x000D      address   England  x000D       x000D      x000D      name   Mark   x000D      email   mark mail com   x000D      age  28  x000D      address   England  x000D      x000D     x000D   x000D    filtering the users array and saving  x000D    result back in users variable x000D  users   users filter x   gt  x name     Mark   amp  amp  x address     England    x000D   x000D   x000D    logging out the result in console x000D  console log users   x000D   x000D   x000D

User · Answer

If you know the name of the filters  you can do it in a line  users   users filter obj   gt  obj name    filter name  amp  amp  obj address    filter address

User · Answer

Can also be done this way       this users   this users filter  item    gt                    return  item name toString   toLowerCase   indexOf val toLowerCase     gt  -1                    item address toLowerCase   indexOf val toLowerCase     gt  -1                    item age toLowerCase   indexOf val toLowerCase     gt  -1                    item email toLowerCase   indexOf val toLowerCase     gt  -1

User · Answer

If the finality of you code is to get the filtered user  I would invert the for to evaluate the user instead of reducing the result array during each iteration   Here an  untested  example   function filterUsers  users  filter        var result            for  i 0 i lt users length i             for  var prop in filter                if  users hasOwnProperty prop   amp  amp  users i  prop      filter prop                     result push users i                                      return result

User · Answer

A clean and functional solution const combineFilters       filters    gt   item    gt        return filters map  filter    gt  filter item   every  x    gt  x     true       then you use it like so  const filteredArray   arr filter combineFilters filterFunc1  filterFunc2     and filterFunc1 for example might look like this  const filterFunc1    item    gt      return item     1   true   false

User · Answer

const data          realName   Sean Bean       characterName   Eddard    Ned    Stark           realName   Kit Harington       characterName   Jon Snow           realName   Peter Dinklage       characterName   Tyrion Lannister           realName   Lena Headey       characterName   Cersei Lannister           realName   Michelle Fairley       characterName   Catelyn Stark           realName   Nikolaj Coster-Waldau       characterName   Jaime Lannister           realName   Maisie Williams       characterName   Arya Stark       const filterKeys     realName    characterName      const multiFilter    data       filterKeys       value         gt  data filter  item    gt  filterKeys some key   gt  item key  toString   toLowerCase   includes value toLowerCase     amp  amp  item key       let filteredData   multiFilter data  filterKeys   stark     console info filteredData            realName    Sean Bean      characterName    Eddard    Ned    Stark          realName    Michelle Fairley      characterName    Catelyn Stark          realName    Maisie Williams      characterName    Arya Stark

User · Answer

If you want to put multiple conditions in filter  you can use  amp  amp  and    operator  var product  Object values arr products  filter x   gt  x Status  status  amp  amp  x email  user

User · Answer

In lodash     filter users  address   England   name   Mark      In es6   users filter o   gt  o address     England   amp  amp  o name     Mark

User · Answer

Dynamic filters with AND condition Filter out people with gender    m   x000D   x000D  var people                   name   john           age  10          gender   m                       name   joseph           age  12          gender   m                       name   annie           age  8          gender   f          var filters         gender   m     var out   people filter person   gt        return Object keys filters  every filter   gt            return filters filter      person filter               console log out  x000D   x000D   x000D   Filter out people with gender    m  and name    joseph   x000D   x000D  var people                   name   john           age  10          gender   m                       name   joseph           age  12          gender   m                       name   annie           age  8          gender   f          var filters         gender   m       name   joseph     var out   people filter person   gt        return Object keys filters  every filter   gt            return filters filter      person filter               console log out  x000D   x000D   x000D   You can give as many filters as you want

User · Answer

with the composition of some little helpers   const filter    address   England   name   Mark    console log     users filter and map propMatches  filter       function propMatches lt T gt  property  string  value  any      return  item  T   boolean   gt  item property      value    function map lt T gt  mapper   key  string  value  any  obj  T    gt   item T    gt  any      return  obj  T    gt        return Object keys obj  map  key    gt          return mapper key  obj key   obj                 export function and lt T gt  predicates    item  T    gt  boolean         return  item  T    gt      predicates reduce           acc  boolean  predicate   item  T    gt  boolean    gt                if  acc     undefined                    return   predicate item                             return   predicate item   amp  amp  acc                     undefined    initial accumulator value

User · Answer

functional solution  function applyFilters data  filters      return data filter item   gt      Object keys filters         map keyToFilterOn   gt          item keyToFilterOn  includes filters keyToFilterOn                   reduce  x  y    gt  x  amp  amp  y  true            this should do the job  applyFilters users  filter

User · Answer

This is an easily understandable functional solution   x000D   x000D  let filtersObject     x000D    address   England   x000D    name   Mark  x000D     x000D   x000D  let users      x000D      name   John   x000D      email   johnson mail com   x000D      age  25  x000D      address   USA  x000D       x000D      x000D      name   Tom   x000D      email   tom mail com   x000D      age  35  x000D      address   England  x000D       x000D      x000D      name   Mark   x000D      email   mark mail com   x000D      age  28  x000D      address   England  x000D      x000D     x000D   x000D  function filterUsers users  filtersObject    x000D      Loop through all key-value pairs in filtersObject x000D    Object keys filtersObject  forEach function key    x000D        Loop through users array checking each userObject x000D      users   users filter function userObject    x000D          If userObject s key value is same as filtersObject s key value  they stay in users array x000D        return userObject key      filtersObject key  x000D         x000D        x000D    return users  x000D    x000D   x000D    ES6 x000D  function filterUsersES users  filtersObject    x000D    for  let key in filtersObject    x000D      users   users filter  userObject    gt  userObject key      filtersObject key    x000D      x000D    return users  x000D    x000D   x000D  console log filterUsers users  filtersObject    x000D  console log filterUsersES users  filtersObject    x000D   x000D   x000D

User · Answer

Using lodash and not pure javascript This is actually quite simple using lodash and very easy to add modify filters  import   from  lodash    async getUsersWithFilter filters         const users   yourArrayOfSomethingReally            Some properties of the  filters  object can be null or undefined  so create a new object without those undefined properties and filter by those who are defined     const filtersWithoutUndefinedValuesObject     omitBy        filters          isNil              return   filter users       filtersWithoutUndefinedValuesObject         The omitBy function checks your filters object and removes any value that is null or undefined  if you take it out  the lodash filter function wont return any result   The filter function will filter out all the objects who s values don t match with the object you pass as a second argument to the function  which in this case  is your filters object     Why use this  Well  assume you have this object  const myFiltersObj         name   quot Java quot      age  50      If you want to add another filter  just add a new property to the myFilterObj  like this  const myFiltersObj         name   quot Java quot      email  50     country   quot HND quot       Call the getUsersWithFilter function  and it will work just fine  If you skip  let s say the name property in the object  the getUsersWithFilter function will filter by the email and country just fine

User · Answer

You can do like this   x000D   x000D  var filter     x000D    address   England   x000D    name   Mark  x000D     x000D  var users      x000D      name   John   x000D      email   johnson mail com   x000D      age  25  x000D      address   USA  x000D       x000D      x000D      name   Tom   x000D      email   tom mail com   x000D      age  35  x000D      address   England  x000D       x000D      x000D      name   Mark   x000D      email   mark mail com   x000D      age  28  x000D      address   England  x000D      x000D     x000D   x000D   x000D  users  users filter function item    x000D    for  var key in filter    x000D      if  item key      undefined    item key     filter key   x000D        return false  x000D      x000D    return true  x000D      x000D   x000D  console log users  x000D   x000D   x000D

User · Answer

Another take for those of you that enjoy succinct code    NOTE  The FILTER method can take an additional this argument  then using an E6 arrow function we can reuse the correct this to get a nice one-liner    x000D   x000D  var users     name   John  email   johnson mail com  age  25 address   USA    x000D                name   Tom  email   tom mail com  age  35 address   England    x000D                name   Mark  email   mark mail com  age  28 address   England     x000D   x000D  var query    address   England   name   Mark    x000D   x000D  var result   users filter search  query   x000D   x000D  function search user   x000D    return Object keys this  every  key    gt  user key      this key    x000D    x000D   x000D   x000D   x000D   x000D      ----------------------- Code for displaying results -----------------  x000D  var element   document getElementById  result    x000D   x000D  function createMarkUp data   x000D    Object keys query  forEach function key   x000D      var p   document createElement  p    x000D      p appendChild document createTextNode  x000D      key toUpperCase            result 0  key     x000D      element appendChild p   x000D        x000D    x000D   x000D  createMarkUp result   x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D

User · Answer

This is another method i figured out  where filteredUsers is a function that returns the sorted list of users    x000D   x000D  var filtersample    address   England   name   Mark    x000D   x000D  filteredUsers     x000D    return this users filter  element    gt    x000D      return element  address   toLowerCase   match this filtersample  address   toLowerCase       element  name   toLowerCase   match this filtersample  name   toLowerCase     x000D       x000D    x000D   x000D   x000D

User · Answer

Here is ES6 version of using arrow function in filter  Posting this as an answer because most of us are using ES6 these days and may help readers to do filter in advanced way using arrow function  let and const     x000D   x000D  const filter     x000D    address   England   x000D    name   Mark  x000D     x000D  let users      x000D      name   John   x000D      email   johnson mail com   x000D      age  25  x000D      address   USA  x000D       x000D      x000D      name   Tom   x000D      email   tom mail com   x000D      age  35  x000D      address   England  x000D       x000D      x000D      name   Mark   x000D      email   mark mail com   x000D      age  28  x000D      address   England  x000D      x000D     x000D   x000D   x000D  users  users filter item   gt    x000D    for  let key in filter    x000D      if  item key      undefined    item key     filter key   x000D        return false  x000D      x000D    return true  x000D      x000D   x000D  console log users  x000D   x000D   x000D

User · Answer

const users          name   John       email   johnson mail com       age  25      address   USA               name   Tom       email   tom mail com       age  35      address   England               name   Mark       email   mark mail com       age  28      address   England          const filteredUsers   users filter    name  age      gt  name      Tom   amp  amp  age     35   console log filteredUsers

[javascript] javascript filter array multiple conditions

Examples related to javascript

Examples related to arrays

Examples related to filter