Given an array of objects :
people = [
{id: "1", name: "abc", gender: "m", age:"15", country:"USA" },
{id: "2", name: "def", gender: "m", age:"25", country:"BRA" },
{id: "3", name: "ghi", gender: "f", age:"05", country:"CHI" },
{id: "4", name: "jkl", gender: "m", age:"35", country:"RUS" },
{id: "5", name: "mno", gender: "m", age:"41", country:"JAP" },
{id: "6", name: "pqr", gender: "f", age:"30", country:"COL" },
{id: "7", name: "stu", gender: "f", age:"31", country:"CAN" },
{id: "8", name: "vwx", gender: "m", age:"78", country:"USA" },
]
And an array of wanted keys:
wantedKeys = ["name", "age", "country"]
Expected output:
peopleFiltered = [
{name: "abc", age:"15", country:"USA" },
{name: "def", age:"25", country:"BRA" },
{name: "ghi", age:"05", country:"CHI" },
{name: "jkl", age:"35", country:"RUS" },
{name: "mno", age:"41", country:"JAP" },
{name: "pqr", age:"30", country:"COL" },
{name: "stu", age:"31", country:"CAN" },
{name: "vwx", age:"78", country:"USA" },
]
How to filter the people
array to return a new array of objects only with the items contained in the wantedKeys
array?
There's probably an even shorter way with reduce
, but this should be a valid starting point.
var peopleFiltered = people.map(person => {
var obj = {};
wantedKeys.forEach((key) => obj[key] = person[key]);
return obj;
});
people = [{
id: "1",
name: "abc",
gender: "m",
age: "15",
country: "USA"
},
{
id: "2",
name: "def",
gender: "m",
age: "25",
country: "BRA"
},
{
id: "3",
name: "ghi",
gender: "f",
age: "05",
country: "CHI"
},
{
id: "4",
name: "jkl",
gender: "m",
age: "35",
country: "RUS"
},
{
id: "5",
name: "mno",
gender: "m",
age: "41",
country: "JAP"
},
{
id: "6",
name: "pqr",
gender: "f",
age: "30",
country: "COL"
},
{
id: "7",
name: "stu",
gender: "f",
age: "31",
country: "CAN"
},
{
id: "8",
name: "vwx",
gender: "m",
age: "78",
country: "USA"
},
]
wantedKeys = ["name", "age", "country"]
var peopleFiltered = people.map(person => {
var obj = {};
wantedKeys.forEach((key) => obj[key] = person[key]);
return obj;
});
console.log(peopleFiltered);
There's a very handy lodash function, pick that does exactly this. We can combine with Array.map()
to get the desired result:
people = [ {id: "1", name: "abc", gender: "m", age:"15", country:"USA" }, {id: "2", name: "def", gender: "m", age:"25", country:"BRA" }, {id: "3", name: "ghi", gender: "f", age:"05", country:"CHI" }, {id: "4", name: "jkl", gender: "m", age:"35", country:"RUS" }, {id: "5", name: "mno", gender: "m", age:"41", country:"JAP" }, {id: "6", name: "pqr", gender: "f", age:"30", country:"COL" }, {id: "7", name: "stu", gender: "f", age:"31", country:"CAN" }, {id: "8", name: "vwx", gender: "m", age:"78", country:"USA" }, ]
wantedKeys = ["name", "age", "country"];
let result = people.map(p => _.pick(p, wantedKeys));
console.log('Result:');
result.forEach(r => console.log(JSON.stringify(r)))
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" referrerpolicy="no-referrer"></script>
Also a vanilla JavaScript approach, using Object.fromEntries() and Array.map()
:
people = [ {id: "1", name: "abc", gender: "m", age:"15", country:"USA" }, {id: "2", name: "def", gender: "m", age:"25", country:"BRA" }, {id: "3", name: "ghi", gender: "f", age:"05", country:"CHI" }, {id: "4", name: "jkl", gender: "m", age:"35", country:"RUS" }, {id: "5", name: "mno", gender: "m", age:"41", country:"JAP" }, {id: "6", name: "pqr", gender: "f", age:"30", country:"COL" }, {id: "7", name: "stu", gender: "f", age:"31", country:"CAN" }, {id: "8", name: "vwx", gender: "m", age:"78", country:"USA" }, ]
wantedKeys = ["name", "age", "country"];
let result = people.map(p => Object.fromEntries(wantedKeys.map(k => [k,p[k]])));
console.log('Result:');
result.forEach(r => console.log(JSON.stringify(r)))
.as-console-wrapper { max-height: 100% !important; top: 0; }