How to use an array of strings to filter an array of objects?

Question

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?

Please [edit] your question to show what research you've done and any attempts you've made based on that research. — Heretic Monkey, Nov 12 '21 at 15:01
I went into over 20 threads here on Stack looking, but I couldn't find it. This topic answers yes to my question. Thank you for sharing. — ARNON, Nov 12 '21 at 15:20

score 1 · Accepted Answer · answered Nov 12 '21 at 15:02

Solution

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;
});

Working Demo

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);

Terry Lennox · Answer 2 · 2021-11-12T15:19:20.550

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; }

I didn't know about this `lodash` function yet. Thank you for sharing. Unfortunately, I can't add libraries in the company environment. — ARNON, Nov 12 '21 at 15:19

How to use an array of strings to filter an array of objects?

2 Answers2

Solution

Working Demo

Related