JavaScript filter for Objects

Question

ECMAScript 5 has the filter   prototype for Array types  but not Object types  if I understand correctly   How would I implement a filter   for Objects in JavaScript    Let s say I have this object   var foo         bar   Yes       And I want to write a filter   that works on Objects   Object prototype filter   function predicate        var result            for  key in this            if  this hasOwnProperty key   amp  amp   predicate this key                  result key    this key                        return result       This works when I use it in the following demo  but when I add it to my site that uses jQuery 1 5 and jQuery UI 1 8 9  I get JavaScript errors in FireBug    x000D   x000D  Object prototype filter   function predicate    x000D    var result       x000D    for  key in this    x000D      if  this hasOwnProperty key   amp  amp   predicate this key      x000D        console log  copying    x000D        result key    this key   x000D        x000D      x000D    return result  x000D     x000D   x000D  var foo     x000D    bar   Yes   x000D    moo  undefined x000D     x000D   x000D  foo   foo filter function property    x000D    return typeof property      undefined   x000D      x000D   x000D  document getElementById  disp   innerHTML   JSON stringify foo  undefined         x000D  console log foo   x000D   disp   x000D    white-space  pre  x000D    font-family  monospace x000D    x000D   lt div id  disp  gt  lt  div gt  x000D   x000D   x000D

User · Answer

If you re willing to use underscore or lodash  you can use pick  or its opposite  omit    Examples from underscore s docs     pick  name   moe   age  50  userid   moe1     name    age        name   moe   age  50    Or with a callback  for lodash  use pickBy      pick  name   moe   age  50  userid   moe1    function value  key  object      return   isNumber value           age  50

User · Answer

Given  object    firstname   abd   lastname  tm   age 16  school  insat     keys     firstname    age      then     keys reduce  result  key    gt        result   key   object key               firstname  abd   age  16     x000D   x000D     Helper x000D  function filter object     keys    x000D    return keys reduce  result  key    gt        result   key   object key           x000D     x000D     x000D   x000D    Example x000D  const person    firstname   abd   lastname  tm   age 16  school  insat    x000D   x000D     Expected to pick only firstname and age keys x000D  console log  x000D    filter person   firstname    age   x000D    x000D   x000D   x000D

User · Answer

My opinionated solution   function objFilter obj  filter  nonstrict     r        if   filter  return      if  typeof filter     string   return   filter   obj filter     for  p in obj        if  typeof filter     object   amp  amp   nonstrict  amp  amp  obj p      filter p   r p    obj p      else if  typeof filter     object   amp  amp   nonstrict  amp  amp  obj p      filter p   r p    obj p      else if  typeof filter     function    if  filter obj p  p obj   r p    obj p       else if  filter length  amp  amp  filter includes p   r p    obj p        return r     Test cases   obj    a 1  b 2  c 3   objFilter obj   a      returns   a  1  objFilter obj    a   b       returns   a  1  b  2  objFilter obj   a 1      returns   a  1  objFilter obj    a   1    true     returns   a  1  objFilter obj   v k o    gt  v 2   1     returns   a  1  c  3    https   gist github com bernardoadc 872d5a174108823159d845cc5baba337

User · Answer

As patrick already stated this is a bad idea  as it will almost certainly break any 3rd party code you could ever wish to use    All libraries like jquery or prototype will break if you extend Object prototype  the reason being that lazy iteration over objects  without hasOwnProperty checks  will break since the functions you add will be part of the iteration

User · Answer

ES6 approach     Imagine you have this object below   const developers       1       id  1     name   Brendan       family   Eich         2       id  2     name   John       family   Resig           3       id  3     name   Alireza       family   Dezfoolian          Create a function   const filterObject    obj  filter  filterValue    gt      Object keys obj  reduce  acc  val    gt       obj val  filter      filterValue   acc               acc          val   obj val                                                         And call it   filterObject developers   name    Alireza      and will return       1      id  1    name   Brendan      family   Eich         2       id  2     name   John       family   Resig

User · Answer

Plain ES6  var foo         bar   quot Yes quot      const res   Object keys foo  filter i   gt  foo i       Yes    console log res       quot bar quot

User · Answer

Like everyone said  do not screw around with prototype  Instead  simply write a function to do so  Here is my version with lodash   import each from  lodash each   import get from  lodash get    const myFilteredResults   results   gt      const filteredResults          each results  obj   gt           filter by whatever logic you want          sample example     const someBoolean   get obj   some boolean             if  someBoolean          filteredResults push obj                  return filteredResults

User · Answer

First of all  it s considered bad practice to extend Object prototype  Instead  provide your feature as utility function on Object  just like there already are Object keys  Object assign  Object is     etc   I provide here several solutions    Using reduce and Object keys As  1   in combination with Object assign Using map and spread syntax instead of reduce Using Object entries and Object fromEntries   1  Using reduce and Object keys  With reduce and Object keys to implement the desired filter  using ES6 arrow syntax     x000D   x000D  Object filter    obj  predicate    gt   x000D      Object keys obj  x000D             filter  key   gt  predicate obj key     x000D             reduce   res  key    gt   res key    obj key   res         x000D   x000D     Example use  x000D  var scores     x000D      John  2  Sarah  3  Janet  1 x000D     x000D  var filtered   Object filter scores  score   gt  score  gt  1    x000D  console log filtered   x000D   x000D   x000D    Note that in the above code predicate must be an inclusion condition  contrary to the exclusion condition the OP used   so that it is in line with how Array prototype filter works   2  As  1   in combination with Object assign  In the above solution the comma operator is used in the reduce part to return the mutated res object  This could of course be written as two statements instead of one expression  but the latter is more concise  To do it without the comma operator  you could use Object assign instead  which does return the mutated object    x000D   x000D  Object filter    obj  predicate    gt   x000D      Object keys obj  x000D             filter  key   gt  predicate obj key     x000D             reduce   res  key    gt  Object assign res     key   obj key            x000D   x000D     Example use  x000D  var scores     x000D      John  2  Sarah  3  Janet  1 x000D     x000D  var filtered   Object filter scores  score   gt  score  gt  1    x000D  console log filtered   x000D   x000D   x000D    3  Using map and spread syntax instead of reduce  Here we move the Object assign call out of the loop  so it is only made once  and pass it the individual keys as separate arguments  using the spread syntax     x000D   x000D  Object filter    obj  predicate    gt   x000D      Object assign    Object keys obj  x000D                       filter  key   gt  predicate obj key     x000D                       map  key   gt      key   obj key          x000D   x000D     Example use  x000D  var scores     x000D      John  2  Sarah  3  Janet  1 x000D     x000D  var filtered   Object filter scores  score   gt  score  gt  1    x000D  console log filtered   x000D   x000D   x000D    4  Using Object entries and Object fromEntries  As the solution translates the object to an intermediate array and then converts that back to a plain object  it would be useful to make use of Object entries  ES2017  and the opposite  i e  create an object from an array of key value pairs  with Object fromEntries  ES2019    It leads to this  one-liner  method on Object    x000D   x000D  Object filter    obj  predicate    gt   x000D                    Object fromEntries Object entries obj  filter predicate    x000D   x000D     Example use  x000D  var scores     x000D      John  2  Sarah  3  Janet  1 x000D     x000D   x000D  var filtered   Object filter scores    name  score     gt  score  gt  1    x000D  console log filtered   x000D   x000D   x000D    The predicate function gets a key value pair as argument here  which is a bit different  but allows for more possibilities in the predicate function s logic

User · Answer

If you have Symbol properties in your object  that should be filtered too  you can not use  Object keys Object entries Object fromEntries      because   Symbol keys are not  enumerable    You could use Reflect ownKeys and filter keys in reduce Reflect ownKeys o  reduce  a  k    gt  allow includes k   amp  amp      a   k   o k      a         Open DevTools for log output - Symbols are not logged on Stackoverflow UI   x000D   x000D  const bKey   Symbol  b k    const o         a                  1       bKey               b       c                   1  3        Symbol for  d      d      const allow     a   bKey  Symbol for  d      const z1   Reflect ownKeys o  reduce  a  k    gt  allow includes k   amp  amp      a   k   o k      a        console log z1                         a  1  Symbol b k    b   Symbol d    d   console log bKey in z1                true console log Symbol for  d   in z1     true x000D   x000D   x000D   This is equal to this const z2   Reflect ownKeys o  reduce  a  k    gt  allow includes k   amp  amp  Object assign a    k   o k       a       const z3   Reflect ownKeys o  reduce  a  k    gt  allow includes k   amp  amp  Object defineProperty a  k   value  o k       a        console log z2       a  1  Symbol b k    quot b quot   Symbol d    quot d quot   console log z3       a  1  Symbol b k    quot b quot   Symbol d    quot d quot    Wrapped in a filter   function  an optional target object could be passed const filter    o  allow  t         gt  Reflect ownKeys o  reduce       a  k    gt  allow includes k   amp  amp      a   k   o k      a       t     console log filter o  allow                  a  1  Symbol b k    quot b quot   Symbol d    quot d quot   console log filter o  allow   e   e          a  1  e   quot e quot   Symbol b k    quot b quot   Symbol d    quot d quot

User · Answer

Solution in Vanilla JS from year 2020   let romNumbers   I  1  V  5  X  10  L  50  C  100  D  500  M  1000   You can filter romNumbers object by key  const filteredByKey   Object fromEntries      Object entries romNumbers  filter   key  value     gt  key      I        filteredByKey    I  1    Or  filter romNumbers object by value   const filteredByValue   Object fromEntries      Object entries romNumbers  filter   key  value     gt  value     5        filteredByValue    V  5

User · Answer

How about   function filterObj keys  obj      const newObj         for  let key in obj        if  keys includes key           newObj key    obj key               return newObj      Or     function filterObj keys  obj      const newObj         Object keys obj  forEach key   gt        if  keys includes key           newObj key    obj key                 return newObj

User · Answer

I have created an Object filter   which does not only filter by a function  but also accepts an array of keys to include  The optional third parameter will allow you to invert the filter   Given   var foo         x  1      y  0      z  -1      a   Hello       b   World      Array   Object filter foo    z    a    b    true     Function   Object filter foo  function  key  value        return Ext isString value         Code  Disclaimer  I chose to use Ext JS core for brevity  Did not feel it was necessary to write type checkers for object types as it was not part of the question    x000D   x000D     Helper function x000D  function print obj    x000D      document getElementById  disp   innerHTML    JSON stringify obj  undefined            lt br   gt    x000D      console log obj   x000D    x000D   x000D  Object filter   function  obj  ignore  invert    x000D      let result          Returns a filtered copy of the original list x000D      if  ignore     undefined    x000D          return obj     x000D        x000D      invert   invert    false  x000D      let not   function condition  yes    return yes    condition   condition     x000D      let isArray   Ext isArray ignore   x000D      for  var key in obj    x000D          if  obj hasOwnProperty key   amp  amp  x000D                    isArray  amp  amp  not  Ext Array contains ignore  key   invert    amp  amp  x000D                     isArray  amp  amp  not  ignore call undefined  key  obj key    invert      x000D              result key    obj key   x000D            x000D        x000D      return result  x000D     x000D   x000D  let foo     x000D      x  1  x000D      y  0  x000D      z  -1  x000D      a   Hello   x000D      b   World  x000D     x000D   x000D  print Object filter foo    z    a    b    true    x000D  print Object filter foo   key  value    gt  Ext isString value     x000D   disp   x000D      white-space  pre  x000D      font-family  monospace x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs extjs 4 2 1 builds ext-core min js  gt  lt  script gt  x000D   lt div id  disp  gt  lt  div gt  x000D   x000D   x000D

User · Answer

If you wish to mutate the same object rather than create a new one   The following example will delete all 0 or empty values   const sev     a  1  b  0  c  3    const deleteKeysBy    obj  predicate    gt    Object keys obj       forEach   key    gt          if  predicate obj key              delete obj key                     deleteKeysBy sev  val   gt   val

User · Answer

In these cases I use the jquery   map  which can handle objects  As mentioned on other answers  it s not a good practice to change native prototypes  https   developer mozilla org en-US docs Web JavaScript Inheritance and the prototype chain Bad practice Extension of native prototypes   Below is an example of filtering just by checking some property of your object  It returns the own object if your condition is true or returns undefined if not  The undefined property will make that record disappear from your object list      map yourObject   el  index   gt       return el yourProperty   el   undefined

User · Answer

Never ever extend Object prototype   Horrible things will happen to your code  Things will break  You re extending all object types  including object literals   Here s a quick example you can try          Extend Object prototype Object prototype extended    I m everywhere            See the result alert     extended                 I m everywhere   alert     extended                 I m everywhere   alert  new Date   extended         I m everywhere   alert  3  extended                 I m everywhere   alert  true extended               I m everywhere   alert   here   extended            I m everywhere       Instead create a function that you pass the object   Object filter   function  obj  predicate        let result       key       for  key in obj            if  obj hasOwnProperty key   amp  amp   predicate obj key                  result key    obj key                        return result

User · Answer

I use this when I need it   const filterObject    obj  condition    gt        const filteredObj           Object keys obj  map key   gt          if  condition key             dataFiltered key    obj key                     return filteredObj

[javascript] JavaScript: filter() for Objects

Examples related to javascript

Examples related to jquery

Examples related to object

Examples related to filtering