'How to filter an array data based on another array value?

I have array data like these.

const dataSample = [
    {
      "staff": 1000,
      "name": "Apple",
      "logo_url": "biten apple",
      "down":"yes"
    },
    {
      "staff": 500,
      "name": "Microsoft",
      "logo": "squares",
      "down":"no"
    },
    {
      "staff": 4000,
      "name": "Google",
      "logo_url": "letter",
      "down":"no"
    },
    {
      "staff": 2000,
      "name": "Coca Cola",
      "logo": "letters",
      "down":"yes"
    },
  ];

I have a another array

const filterArr = [“name”, “down”];

I want a output like these?

[
    {
      "name": "Apple",
      "down": "yes"
    },
    {
      "name": "Microsoft",
      "down": "no"
    },
    {
      "name": "Google",
      "down": "no"
    },
    {
      "name": "Coca Cola",
      "down": "yes"
    },
];


Solution 1:[1]

  • Map over the original array, dataSample in your case.
  • Convert every object into an array using Object.entries and filter out the items where the key is present in the lookup array (filterArr).
  • Convert the array back to an object using Object.fromEntries

const dataSample = [
    { staff: 1000, name: "Apple", logo_url: "biten apple", down: "yes" },
    { staff: 500, name: "Microsoft", logo: "squares", down: "no" },
    { staff: 4000, name: "Google", logo_url: "letter", down: "no" },
    { staff: 2000, name: "Coca Cola", logo: "letters", down: "yes" },
  ],
  filterArr = ["name", "down"],
  output = dataSample.map((o) =>
    Object.fromEntries(
      Object.entries(o).filter(([k, v]) => filterArr.includes(k))
    )
  );

console.log(output);

If you're dealing with large arrays, then you should consider converting the lookup array (filterArr) into a Set.

const dataSample = [
    { staff: 1000, name: "Apple", logo_url: "biten apple", down: "yes" },
    { staff: 500, name: "Microsoft", logo: "squares", down: "no" },
    { staff: 4000, name: "Google", logo_url: "letter", down: "no" },
    { staff: 2000, name: "Coca Cola", logo: "letters", down: "yes" },
  ],
  filterArr = ["name", "down"],
  filterSet = new Set(filterArr),
  output = dataSample.map((o) =>
    Object.fromEntries(Object.entries(o).filter(([k, v]) => filterSet.has(k)))
  );

console.log(output);

Solution 2:[2]

This can be done using Array.map() combined with Array.reduce() as follows:

const result = dataSample.map(o => filterArr.reduce((acc, curr) => {
  acc[curr] = o[curr];
  return acc;
}, {}));

Please take a look at the runnable code below and see how it works.

const dataSample = [{
    "staff": 1000,
    "name": "Apple",
    "logo_url": "biten apple",
    "down": "yes"
  },
  {
    "staff": 500,
    "name": "Microsoft",
    "logo": "squares",
    "down": "no"
  },
  {
    "staff": 4000,
    "name": "Google",
    "logo_url": "letter",
    "down": "no"
  },
  {
    "staff": 2000,
    "name": "Coca Cola",
    "logo": "letters",
    "down": "yes"
  },
];
const filterArr = ["name", "down"];

const result = dataSample.map(o => filterArr.reduce((acc, curr) => {
  acc[curr] = o[curr];
  return acc;
}, {}));

console.log(result)

Solution 3:[3]

try this:

const dataSample = [
    { staff: 1000, name: "Apple", logo_url: "biten apple", down: "yes" },
    { staff: 500, name: "Microsoft", logo: "squares", down: "no" },
    { staff: 4000, name: "Google", logo_url: "letter", down: "no" },
    { staff: 2000, name: "Coca Cola", logo: "letters", down: "yes" },
];
const filterArr = ["name", "down"];
let output = dataSample.map((cv) => Object.assign( ...filterArr.map(fa => ({[fa]: cv[fa]}))));
console.log(output);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 uminder
Solution 3 Bahador Raghibizadeh