Question

我想根据另一个数组的键来过滤带有数据对象的数组。

我需要显示/隐藏基于以下数据的表的列：

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

这将导致一个表具有三列（“ ID”，“名称”和“描述”）和两行。

我现在有一个下拉列表，其中包含每个表标题的一个复选框。

这些输入将存储在另一个数组中，因此当您在下拉列表中单击“ id”时，该数组如下所示：

var selectedColumns = ["id"]

..或当您选择“ id”和“ name”时：

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

我现在想基于data数组过滤我的selectedColumns数组。

我已经尝试过filter函数，但是我无法正确地思考如何做到这一点：

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

背景：该表应该是可重用的Vue组件，因此所有键（“ id”，“ name”，..）和表头均会相应更改，从而防止对逻辑进行硬编码。

Answer 1

您可以使用所需键，并使用仅具有所需属性的新对象映射新数组。

function getProperties(keys) {
    return data.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(['id', 'name']));

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

Answer 2

尝试一下，它会起作用：

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

根据另一个数组的键过滤数组

2 个答案: