如何根据定义的属性过滤和排序 object？

Question

我有一个 table，其中我有一个仅显示选定列的函数。

我将选定的列（table 标题）存储在数组 selectedTableHeaders 中。

现在我想确保只显示 table 数据中的选定列。

所以这意味着我想根据 selectedTableHeaders 中存储的属性创建或过滤一个新数组。

此外，我想确保 table 数据的顺序正确，所以如果我禁用 table header 3 然后 table header6 然后再启用3，后面加3。这意味着我还必须根据 table headers.tableData 重新排序。

我该如何解决这个问题？

const selectedTableHeaders = [
    "table_header_1",
    "table_header_3",
    "table_header_5",
    "table_header_6"
]

tableData [
    {
        "rowData": {
            "table_header_1": "0",
            "table_header_2": "data 2",
            "table_header_3": "US",
            "table_header_4": "data 4",
            "table_header_5": "-",
            "table_header_6": "data 6"
        }
    },
    {
        "rowData": {
            "table_header_1": "0",
            "table_header_2": "test 2",
            "table_header_3": "GB",
            "table_header_4": "test 4",
            "table_header_5": "Y",
            "table_header_6": "test data 6"
        }
    },
    {
        "rowData": {
            "table_header_1": "0",
            "table_header_2": "test 2",
            "table_header_3": "DE",
            "table_header_4": 70000118,
            "table_header_5": "-",
            "table_header_6": "test table 6"
        }
    }
]

我试过类似的东西：

this.tableData.forEach((tableItem) => {
        const newArray = Object.assign(...selectedTableHeaders.map(k => ({ [k]: tableItem[k] })));
})

但是我没有得到 newArray 中的值。有没有更好的方法来处理这个问题并获取新数组中的属性值？所以我想创建一个仅包含选定列的新数组。

以及如何根据 table 标题确保 table 数据是 well-ordered。

例如：

如果这是标题的顺序：

"table_header_2",
"table_header_1",
"table_header_5",
"table_header_4"

那个rowData也变成这样：

"rowData": {
    "table_header_2": "data 2 ",
    "table_header_1": "0",
    "table_header_5": "-",
    "table_header_4": "data 4",
}

Answer 1

您可以简单地通过迭代数组对象来实现。

工作演示：

const selectedTableHeaders = [
    "table_header_1",
    "table_header_3",
    "table_header_5",
    "table_header_6"
]

const tableData = [
    {
        "rowData": {
            "table_header_1": "0",
            "table_header_2": "data 2 ",
            "table_header_3": "US",
            "table_header_4": "data 4",
            "table_header_5": "-",
            "table_header_6": "data 6"
        }
    }, {
        "rowData": {
            "table_header_1": "0",
            "table_header_2": "test 2",
            "table_header_3": "GB",
            "table_header_4": "test 4",
            "table_header_5": "Y",
            "table_header_6": "test data 6"
        }
    }, {
        "rowData": {
            "table_header_1": "0",
            "table_header_2": "test 2",
            "table_header_3": "DE",
            "table_header_4": 70000118,
            "table_header_5": "-",
            "table_header_6": "test table 6"
        }
    }
];

const res = tableData.map((rowDataObj) => {
    Object.keys(rowDataObj.rowData).forEach((headerKey) => {
    if (!selectedTableHeaders.includes(headerKey)) {
      delete rowDataObj.rowData[headerKey]
    }
  });
  return rowDataObj.rowData;
});

console.log(res);

Answer 2

您可以只映射您的字段，因为它们已经按照您想要的顺序显示，然后使用键获取值，

注册

const selectedTableHeaders = [
  "table_header_1",
  "table_header_3",
  "table_header_5",
  "table_header_6",
];

const tableData = [
  {
    rowData: {
      table_header_1: "0",
      table_header_2: "data 2 ",
      table_header_3: "US",
      table_header_4: "data 4",
      table_header_5: "-",
      table_header_6: "data 6",
    },
  },
  {
    rowData: {
      table_header_1: "0",
      table_header_2: "test 2",
      table_header_3: "GB",
      table_header_4: "test 4",
      table_header_5: "Y",
      table_header_6: "test data 6",
    },
  },
  {
    rowData: {
      table_header_1: "0",
      table_header_2: "test 2",
      table_header_3: "DE",
      table_header_4: 70000118,
      table_header_5: "-",
      table_header_6: "test table 6",
    },
  },
];

function filter(src, fields) {
  return src.map((row) => ({
    rowData: Object.fromEntries(
      fields.map((m) => [m, row.rowData[m]])),
  }));
}

console.log(filter(tableData, selectedTableHeaders));

如何根据定义的属性过滤和排序 object？

How to filter and sort an object based on defined properties?

javascript

html-table

ecmascript-6

vue.js