代码之家 › 专栏 › 技术社区 › Bennett Dams

根据另一个数组的键筛选数组

filter arrays javascript

Bennett Dams · 技术社区 · 8 年前

我想用数据对象过滤一个数组,它的键基于另一个数组。

我需要显示/隐藏表的列,它基于如下数据:

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

这将生成一个包含三列(“id”、“name”和“description”)和两行的表。

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

这些输入存储在另一个数组中,因此当您在下拉列表中单击“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”…)和表头都会相应地改变,这就防止了对逻辑进行硬编码。

2 回复 | 直到 8 年前

Nina Scholz 8 年前

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

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

Ankit Agarwal 8 年前

试试这个就行了:

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