Filter object properties by key in ES6

Question

Let s say I have an object       item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd        I want to create another object by filtering the object above so I have something like          item1    key   sdfd   value  sdfd         item3    key   sdfd   value  sdfd         I am looking for a clean way to accomplish this using Es6  so spread operators are available to me

User · Answer

The cleanest way you can find is with Lodash pick  const     require  lodash     const allowed     item1    item3     const obj       item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd       const filteredObj     pick obj  allowed

User · Answer

Simple Way  To do this    x000D   x000D  const myData     x000D    item1    key   sdfd   value  sdfd     x000D    item2    key   sdfd   value  sdfd     x000D    item3    key   sdfd   value  sdfd    x000D     x000D  const item1 item3  myData x000D  const result    item1 item3   x000D   x000D   x000D

User · Answer

The answers here are definitely suitable but they are a bit slow because they require looping through the whitelist for every property in the object  The solution below is much quicker for large datasets because it only loops through the whitelist once    const data       allowed1   blah     allowed2   blah blah     notAllowed   woah     superSensitiveInfo   whooooah     allowed3   bleh      const whitelist     allowed1    allowed2    allowed3     function sanitize data  whitelist        return whitelist reduce         result  key    gt          data key      undefined             Object assign result     key   data key                 result                         sanitize data  whitelist

User · Answer

use PropPick package  pick  item1 item3   obj             item1    key   sdfd   value  sdfd          item3    key   sdfd   value  sdfd

User · Answer

OK  how about this   const myData       item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd        function filteredObject obj  filter      if  Array isArray filter        filter    filter toString           const newObj         for i in obj        if  filter includes i           newObj i    obj i               return newObj      and call it like this   filteredObject myData    item2        item1    key   sdfd   value  sdfd     item3    key   sdfd   value  sdfd

User · Answer

You can do something like this   const base       item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd        const filtered         source   gt             with source                return  item1  item3                      base       one line const filtered    source   gt    with source   return  item1  item3       base     This works but is not very clear  plus the with statement is not recommended  https   developer mozilla org en-US docs Web JavaScript Reference Statements with

User · Answer

I m surprised how nobody has suggested this yet  It s super clean and very explicit about which keys you want to keep   const unfilteredObj    a       b      c      x      y       const filterObject     a b c     gt    a b c   const filteredObject   filterObject unfilteredObject    Or if you want a dirty one liner   const unfilteredObj    a       b      c      x      y       const filteredObject      a b c    gt   a b c    unfilteredObject

User · Answer

There are many ways to accomplish this  The accepted answer uses a Keys-Filter-Reduce approach  which is not the most performant   Instead  using a for   in loop to loop through keys of an object  or looping through the allowed keys  and then composing a new object is  50  more performanta   const obj       item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd        const keys     item1    item3     function keysReduce  obj  keys      return keys reduce  acc  key    gt        if obj key      undefined          acc key    obj key             return acc                function forInCompose  obj  keys      const returnObj         for  const key in obj        if keys includes key           returnObj key    obj key               return returnObj      keysReduce obj  keys        Faster if the list of allowed keys are short forInCompose obj  keys      Faster if the number of object properties are low     a  See jsPerf for the benchmarks of a simple use case  Results will differ based on browsers

User · Answer

If you have a list of allowed values  you can easily retain them in an object using    x000D   x000D  const raw     x000D    item1    key   sdfd   value  sdfd     x000D    item2    key   sdfd   value  sdfd     x000D    item3    key   sdfd   value  sdfd    x000D     x000D   x000D  const allowed     item1    item3    x000D   x000D  const filtered   Object keys raw  x000D     filter key   gt  allowed includes key   x000D     reduce  obj  key    gt    x000D      obj key    raw key   x000D      return obj  x000D            x000D   x000D  console log filtered   x000D   x000D   x000D    This uses    Object keys to list all properties in raw  the original data   then Array prototype filter to select keys that are present in the allowed list  using   Array prototype includes to make sure they are present  Array prototype reduce to build a new object with only the allowed properties    This will make a shallow copy with the allowed properties  but won t copy the properties themselves    You can also use the object spread operator to create a series of objects without mutating them  thanks to rjerue for mentioning this     x000D   x000D  const raw     x000D    item1    key   sdfd   value  sdfd     x000D    item2    key   sdfd   value  sdfd     x000D    item3    key   sdfd   value  sdfd    x000D     x000D   x000D  const allowed     item1    item3    x000D   x000D  const filtered   Object keys raw  x000D     filter key   gt  allowed includes key   x000D     reduce  obj  key    gt    x000D      return   x000D           obj  x000D         key   raw key  x000D         x000D            x000D   x000D  console log filtered   x000D   x000D   x000D    For purposes of trivia  if you wanted to remove the unwanted fields from the original data  which I would not recommend doing  since it involves some ugly mutations   you could invert the includes check like so    x000D   x000D  const raw     x000D    item1    key   sdfd   value  sdfd     x000D    item2    key   sdfd   value  sdfd     x000D    item3    key   sdfd   value  sdfd    x000D     x000D   x000D  const allowed     item1    item3    x000D   x000D  Object keys raw  x000D     filter key   gt   allowed includes key   x000D     forEach key   gt  delete raw key    x000D   x000D  console log raw   x000D   x000D   x000D    I m including this example to show a mutation-based solution  but I don t suggest using it

User · Answer

This is how I did it  recently   const dummyObj   Object assign     obj   delete dummyObj key   const target   Object assign         dummyObj

User · Answer

ok  how about this one-liner      const raw           item1    key   sdfd   value   sdfd           item2    key   sdfd   value   sdfd           item3    key   sdfd   value   sdfd                const filteredKeys     item1    item3         const filtered   Object assign        filteredKeys map key  gt     key  raw key

User · Answer

You can now make it shorter and simpler by using the Object fromEntries method  check browser support    const raw     item1    prop  1     item2    prop  2     item3    prop  3        const allowed     item1    item3     const filtered   Object fromEntries     Object entries raw  filter          key  val    gt allowed includes key            read more about  Object fromEntries

User · Answer

You can add a generic ofilter  implemented with generic oreduce  so you can easily filter objects the same way you can arrays      const oreduce    f  acc  o    gt    Object      entries  o       reduce          acc    k  v      gt  f  acc  v  k  o          acc          const ofilter    f  o    gt    oreduce        acc  v  k  o   gt          f  v  k  o              Object assign  acc    k   v               acc                o         We can see it working here -  const data       item1    key   a   value  1       item2    key   b   value  2       item3    key   c   value  3        console log     ofilter          v  k    gt  k      item2          data                      item1    key   a   value  1                  item3    key   c   value  3                     ofilter         x   gt  x value     3         data                      item3    key   c   value  3             Verify the results in your own browser below       x000D   x000D  const oreduce    f  acc  o    gt  x000D    Object x000D       entries  o  x000D       reduce x000D           acc    k  v      gt  f  acc  v  k  o  x000D          acc x000D          x000D   x000D  const ofilter    f  o    gt  x000D    oreduce x000D         acc  v  k  o   gt  x000D          f  v  k  o  x000D              Object assign  acc     k   v    x000D              acc x000D           x000D        o x000D        x000D   x000D  const data   x000D      item1    key   a   value  1   x000D      item2    key   b   value  2   x000D      item3    key   c   value  3   x000D      x000D   x000D  console log x000D      ofilter x000D           v  k    gt  k      item2  x000D          data x000D          x000D               item1    key   a   value  1     x000D               item3    key   c   value  3     x000D             x000D   x000D      ofilter x000D          x   gt  x value     3 x000D          data x000D          x000D               item3    key   c   value  3       x000D      x000D   x000D   x000D    These two functions could be implemented in many ways  I chose to attach to Array prototype reduce inside oreduce but you could just as easily write it all from scratch

User · Answer

If you are OK with using ES6 syntax  I find that the cleanest way to do this  as noted here and here is  const data       item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd        const   item2     newData     data   Now  newData contains      item1    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd        Or  if you have the key stored as a string  const key    item2   const    key         newData     data   In the latter case   key  is converted to item2 but since you are using a const assignment  you need to specify a name for the assignment    represents a throw away value  More generally  const   item2     newData     data     Assign item2 to item2 const   item2  someVarName     newData     data     Assign item2 to someVarName const   item2        newData     data     Assign item2 to   const     item2          newData     data     Convert string to key first       Not only does this reduce your operation to a one-liner but it also doesn t require you to know what the other keys are  those that you want to preserve   A simple utility function would look like this  function removePropFromObject obj  prop      const    prop         rest     obj   return      rest

User · Answer

This function will filter an object based on a list of keys  its more efficient than the previous answer as it doesn t have to use Array filter before calling reduce  so its O n  as opposed to O n   filtered   function filterObjectByKeys  object  keys      return Object keys object  reduce  accum  key    gt        if  keys includes key           return      accum   key   object key          else         return accum

User · Answer

const filteredObject   Object fromEntries Object entries originalObject  filter   key  value     gt  key     uuid

User · Answer

A simpler solution without using filter can be achieved with Object entries   instead of Object keys    const raw       item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd        const allowed     item1    item3     const filtered   Object entries raw  reduce  acc elm   gt     const  k v    elm   if  allowed includes k         acc k    v        return acc

User · Answer

I know that this already has plenty of answers and is a rather old question  But I just came up with this neat one-liner  JSON parse JSON stringify raw    key    value    item1    item3      That returns another object with just the whitelisted attributes  Note that the key and value is included in the list

User · Answer

You can remove a spesific property on your object items     item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd          Example 1 var key    quot item2 quot   delete items key        Example 2 delete items  quot item2 quot        Example 3 delete items item2

User · Answer

The following method takes the object and any properties to filter out   x000D   x000D  function removeObjectKeys obj     keysToRemove      let mObject        obj     for  let key of keysToRemove        const    String key          rest     mObject     mObject        rest         return mObject        const obj     123   hello   345   world   567   and kitty     const filtered   removeObjectKeys obj  123   console log filtered    const twoFiltered   removeObjectKeys obj  345  567   console log twoFiltered   x000D   x000D   x000D

User · Answer

Piggybacking on ssube s answeranswer   Here s a reusable version   Object filterByKey   function  obj  predicate      return Object keys obj       filter key   gt  predicate key        reduce  out  key    gt          out key    obj key         return out                  To call it use  const raw       item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd        const allowed     item1    item3     var filtered   Object filterByKey raw  key   gt     return allowed includes key         console log filtered     The beautiful thing about ES6 arrow functions is that you don t have to pass in allowed as a parameter

User · Answer

Another solution using the  quot new quot  Array reduce method  const raw       item1    key   sdfd   value  sdfd       item2    key   sdfd   value  sdfd       item3    key   sdfd   value  sdfd        const allowed     item1    item3     const filtered   allowed reduce  obj  key    gt       obj key    raw key      return obj          console log filtered    Demonstration in this Fiddle     But I like the solution in this answer here which is using Object fromEntries Array filter and Array includes   const object   Object fromEntries    Object entries raw  filter   key  value     gt  allowed includes key        Demonstration in this Fiddle

User · Answer

During loop  return nothing when certain properties keys are encountered and continue with the rest   const loop   product   gt  Object keys product  map key   gt        if  key       id     key        v             return             return            lt ul className  list-group  gt               lt li gt                   product key                    lt span gt                       key                   lt  span gt               lt  li gt           lt  ul gt

User · Answer

Nothing that hasn t been said before  but to combine some answers to a general ES6 answer    x000D   x000D  const raw     x000D    item1    key   sdfd   value   sdfd     x000D    item2    key   sdfd   value   sdfd     x000D    item3    key   sdfd   value   sdfd    x000D     x000D   x000D  const filteredKeys     item1    item3    x000D   x000D  const filtered   filteredKeys x000D     reduce  obj  key    gt        obj   key   raw key           x000D   x000D  console log filtered   x000D   x000D   x000D

User · Answer

That would be my solution   const filterObject    obj  condition    gt        const filteredObj           Object keys obj  map key   gt          if  condition key             dataFiltered key    obj key                     return filteredObj

User · Answer

Just another solution in one line of Modern JS with no external libraries   I was playing with  Destructuring  feature     x000D   x000D  const raw     x000D      item1    key   sdfd   value   sdfd     x000D      item2    key   sdfd   value   sdfd     x000D      item3    key   sdfd   value   sdfd    x000D       x000D  var myNewRaw       item1  item3     gt     item1  item3     raw   x000D  console log myNewRaw   x000D   x000D   x000D

User · Answer

Another short way  x000D   x000D  function filterByKey v keys     const newObj        keys forEach key  gt  v key  newObj key  v key          return newObj       given let obj    foo   bar   baz  42 baz2  blabla     spider   man   monkey true      when let outObj  filterByKey obj   bar   baz2   monkey        then  console log outObj                baz2    blabla          monkey   true       x000D   x000D   x000D

User · Answer

Another approach would be to use Array prototype forEach   as    x000D   x000D  const raw     x000D    item1    x000D      key   sdfd   x000D      value   sdfd  x000D       x000D    item2    x000D      key   sdfd   x000D      value   sdfd  x000D       x000D    item3    x000D      key   sdfd   x000D      value   sdfd  x000D      x000D     x000D   x000D  const allowed     item1    item3    lll    x000D   x000D  var finalObj       x000D  allowed forEach allowedVal   gt    x000D    if  raw allowedVal   x000D      finalObj allowedVal    raw allowedVal  x000D     x000D  console log finalObj  x000D   x000D   x000D    It includes values of only those keys which are available in the raw data and thus preventing adding any junk data

[filter] Filter object properties by key in ES6

Examples related to filter

Examples related to ecmascript-6