Filter array based on it's keys by another array

Question

I want to filter an array with data objects with it's keys based on another array.

I need to show/hide columns of a table, which is based on data like this:

var data = [{
    id: "1",
    name: "A",
    description: "number 1"
  },
  {
    id: "2",
    name: "B",
    description: "number 2"
  }
]

This results in a table with three columns ("ID", "Name" and "Description") and two rows.

I now have a dropdown which contains one checkbox for each table header.

These inputs get stored in another array, so when you click "id" in the dropdown, the array looks like this:

var selectedColumns = ["id"]

..or when you select "id" and "name":

var selectedColumns = ["id", "name"]

I now want to filter my data array based on the selectedColumns array.

I already tried the filter function, but I can't wrap my head around on how to do it right:

   if (selectedColumns) {
    if (selectedColumns.length != 0) {
      data = data.filter(function(item) {
        var keys = Object.keys(item)
        keys.forEach(function(key) {
          if (!selectedColumns.includes(key)) {
            delete item[key];
          }
        })

        return true
      })
    }

Background: This table should be a reusable Vue component, so all the keys ("id", "name", ..) and the table headers change accordingly, which prevents hardcoding the logic.

Do you mean you want the elements of data to have only the keys defined in selectedColumns? — Ahmed Fasih
– Ahmed Fasih, Commented Jun 19, 2018 at 16:01
...I now want to filter my data array based on the selectedColumns array... Does this means you want to hide the columns which are not in the selectedColumns arrays? — lealceldeiro
– lealceldeiro, Commented Jun 19, 2018 at 16:01
That's not a filter, that's a map, like Nina's answer specifies. — Ahmed Fasih
– Ahmed Fasih, Commented Jun 19, 2018 at 16:03

Nina Scholz · Accepted Answer · 2021-04-15 08:05:04Z

4

You could take the wanted keys and map a new array with new objects with only the wanted properties.

function getProperties(array, keys) {
    return array.map(o => Object.assign(...keys.map(k => ({ [k]: o[k] }))));
}

var data = [{ id: "1", name: "A", description: "number 1" }, { id: "2", name: "B", description: "number 2" }];

console.log(getProperties(data, ['id', 'name']));

.as-console-wrapper { max-height: 100% !important; top: 0; }

An even shorter approach with Object.fromEntries.

function getProperties(array, keys) {
    return array.map(o => Object.fromEntries(keys.map(k => [k, o[k]])));
}

var data = [{ id: "1", name: "A", description: "number 1" }, { id: "2", name: "B", description: "number 2" }];

console.log(getProperties(data, ['id', 'name']));

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Apr 15, 2021 at 8:05

answered Jun 19, 2018 at 16:02

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ankit Agarwal · Accepted Answer · 2018-06-19 16:06:09Z

0

Try this and it works:

var data = [{
    id: "1",
    name: "A",
    description: "number 1"
  },
  {
    id: "2",
    name: "B",
    description: "number 2"
  }
];

var selectedColumns = ["id", "name"];


if (selectedColumns) {
    if (selectedColumns.length != 0) {
      var data = data.filter(function(item) {
        var keys = Object.keys(item)
        keys.forEach(function(key) {
          if (!selectedColumns.includes(key)) {
            delete item[key];
          }
        })

        return true
      })
    }
    console.log(data);
}

answered Jun 19, 2018 at 16:06

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Collectives™ on Stack Overflow

Filter array based on it's keys by another array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related