How to filter an object by its values in ES6

Question

What is the best way to filter an object this way in ES6?

Starting data:

const acceptedValues = ["value1", "value3"]
const myObject = {
    prop1: "value1",
    prop2: "value2",
    prop3: "value3"
}

Expected output:

filteredObject = {
    prop1: "value1",
    prop3: "value3"
}

Answer 1

You can use reduce() to create new object and includes() to check if value of object exists in array.

const acceptedValues = ["value1", "value3"]
const myObject = {
  prop1: "value1",
  prop2: "value2",
  prop3: "value3"
}

var filteredObject = Object.keys(myObject).reduce(function(r, e) {
  if (acceptedValues.includes(myObject[e])) r[e] = myObject[e]
  return r;
}, {})

console.log(filteredObject)

Answer 2

For ES6 and if

• your task can be solved with only filtering based on keys and
• you need static code (you know exactly, what properties you need to filter) and
• it does not depend on the app state,

than you can use the following destructuring technique:

const myObject = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
}
const { prop2, ...filteredObject } = myObject

console.info({ filteredObject, prop2 })

And you will have:

filteredObject: {prop1: "value1", prop3: "value3"}
prop2: "value2"

Answer 3

Just to build on top of @Nenad Vracar good answer you could use an object instead of the Array with includes for faster lookup:

const acceptedValues = ["value1", "value3"];
const myObject = {
  prop1: "value1",
  prop2: "value2",
  prop3: "value3"
};

const lookup = acceptedValues.reduce( (memo, prop) => {
  memo[prop] = true;
  return memo;
});

const filteredObject = Object.keys(myObject).reduce((filtered, key) => {
  if(lookup[myObject[key]]){
    filtered[key] = myObject[key];
  }
  return filtered;
}, {});

console.log(filteredObject);

Nor that the includes doesn't do the job, but I thought to provide an alternative view.

Answer 4

Since I haven't seen an answer using Object.entries here's one. Note, due to Object.entries() implementation being significantly slower than Object.keys(), this will also be slower than the accepted answer, but some may prefer this for readability or extendability (easier to pass a different filtering function).

const acceptedValues = ["value1", "value3"];
const myObject = {
    prop1:"value1",
    prop2:"value2",
    prop3:"value3"
};
const filteredEntries = Object.entries(myObject).filter(([, v]) => acceptedValues.includes(v));
const filteredObject = Object.fromEntries(filteredEntries);

Or as a longish one-liner:

const filteredObject = Object.fromEntries(Object.entries(myObject).filter(([, v]) => accepted.includes(v)));

Answer 5

Why not a simple for loop?

const acceptedValues = ["value1","value3"]
const myObject = {
    prop1:"value1",
    prop2:"value2",
    prop3:"value3"
};
var  filteredObject = {};
for(e in myObject) {
    if (myObject.hasOwnProperty(e)) {
      if (acceptedValues.indexOf(myObject[e]) != -1) {
          filteredObject[e] = myObject[e];
      }
    }
}
console.log(filteredObject);

Answer 6

Using a simple for loop and get object by key.

const acceptedValues = ["value1","value3"]
const myObject = {
    prop1:"value1",
    prop2:"value2",
    prop3:"value3"
}

Object.prototype.getKeyByValue = function( value ) {
    for( var prop in this ) {
        if( this.hasOwnProperty( prop ) ) {
             if( this[ prop ] === value )
                 return prop;
        }
    }
}

for (var i in acceptedValues) {
  if (myObject.getKeyByValue(acceptedValues[i])){
    console.log(acceptedValues[i]);
  }
}

Answer 7

function filter(myObject){
  var obj=Object.assign({},myObject);
  Object.keys(obj).forEach(function(key) {
      if(acceptedValues.indexOf(obj[key])<0) delete obj[key];
  });
  return obj;
}
const filteredObject=filter(myObject);

Answer 8

IMO, the "best way" is the Lodash way

const filtered = _.pick(myObject, acceptedValues)

https://lodash.com/docs/4.17.10#pick

Answer 9

const newObj = {};
for(let key of Object.keys(myObject)){
  if(acceptedValues.includes(key)){
    newObj[key] = myObject[key]
  }
}
console.log(newObj);