What is the best way to filter an array of objects using an array of strings?

Question

What is the best way to filter an array of objects using an array of strings?

Suppose we have an array filled with 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" },
]

As well as an array containing the keys of interest:

wantedKeys = ["name", "age", "country"]

Desired outcome:

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 can we filter the people array to generate a new array with only the elements specified in the wantedKeys array?

javascript arrays object

Answer 1

Answer №1

Solution

If you're looking for a more concise solution, you can try using the reduce method. However, the current code serves as a good starting point.

var peopleFiltered = people.map(person => {
  var obj = {};
  wantedKeys.forEach((key) => obj[key] = person[key]);
  return obj;
});

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

Answer 2

Solution

If you're looking for a more concise solution, you can try using the reduce method. However, the current code serves as a good starting point.

var peopleFiltered = people.map(person => {
  var obj = {};
  wantedKeys.forEach((key) => obj[key] = person[key]);
  return obj;
});

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

Answer 3

Answer №2

Utilizing the powerful lodash function called pick, we can achieve the desired outcome by combining it with 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 => _.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>

For those preferring a vanilla JavaScript method, employ Object.fromEntries() along with 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; }

Answer 4

Utilizing the powerful lodash function called pick, we can achieve the desired outcome by combining it with 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 => _.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>

For those preferring a vanilla JavaScript method, employ Object.fromEntries() along with 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; }

What is the best way to filter an array of objects using an array of strings?

Answer №1

Solution

Interactive Demo

Answer №2

Similar questions

Converting javascript html object lowercase

Uploading files with previews and no option to alter the image dimensions

Struggling to Retrieve Specific Keys for Individual Values in Firebase with React Native

"Update data on a webpage using Javascript without the need to refresh the

The serialization method in ajax is not providing the expected values as needed

Using JavaScript to create an image slider

Ensure each list item is directly aligned when swiping on a mobile device

How can I fill arrays in python using numpy?

There seems to be an issue with Bookshelfjs and bcrypt hashPassword - it is functioning properly during the create

Error: Unable to modify a property that is marked as read-only on object '#<Object>' in Redux Toolkit slice for Firebase Storage in React Native

Javascript and JSON: Making Updates to Files

I desire to activate the textbox only when the radiobtnlist value equals 1

Text field in React's material-ui causes the screen to shake

Module fails to load in the proper sequence

How can two unique links toggle the visibility of divs with two specific IDs?

Locating the Maximum and Minimum Values in an Array yields a result of zero

I am facing an issue with body-parser not properly processing my request in express.js

Creating new 'morphing' geometry in Three.js with all required buffers: A step-by-step guide

Encountering Babel issues while incorporating npm package into React Native project

Using jQuery to access a server-side SQL database through PHP