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.
Advertisement
Answer
If you have a list of allowed values, you can easily retain them in an object using:
const raw = { item1: { key: 'sdfd', value:'sdfd' }, item2: { key: 'sdfd', value:'sdfd' }, item3: { key: 'sdfd', value:'sdfd' } }; const allowed = ['item1', 'item3']; const filtered = Object.keys(raw) .filter(key => allowed.includes(key)) .reduce((obj, key) => { obj[key] = raw[key]; return obj; }, {}); console.log(filtered);
This uses:
Object.keys
to list all properties inraw
(the original data), thenArray.prototype.filter
to select keys that are present in the allowed list, usingArray.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):
const raw = { item1: { key: 'sdfd', value:'sdfd' }, item2: { key: 'sdfd', value:'sdfd' }, item3: { key: 'sdfd', value:'sdfd' } }; const allowed = ['item1', 'item3']; const filtered = Object.keys(raw) .filter(key => allowed.includes(key)) .reduce((obj, key) => { return { ...obj, [key]: raw[key] }; }, {}); console.log(filtered);
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:
const raw = { item1: { key: 'sdfd', value:'sdfd' }, item2: { key: 'sdfd', value:'sdfd' }, item3: { key: 'sdfd', value:'sdfd' } }; const allowed = ['item1', 'item3']; Object.keys(raw) .filter(key => !allowed.includes(key)) .forEach(key => delete raw[key]); console.log(raw);
I’m including this example to show a mutation-based solution, but I don’t suggest using it.