如何根據定義的屬性過濾和排序物件？

我有一個表，其中有一個只顯示選定列的函式。

我將選定的列（表標題）存盤在一個陣列selectedTableHeaders中。

現在我想確保只顯示表資料中的選定列。

這意味著我想根據存盤在selectedTableHeaders.

此外，我想確保 tableData 的順序正確，所以如果我禁用表頭 3，然后禁用表頭 6，然后再次啟用 3，稍后會添加 3。這意味著我還必須根據表頭重新排序 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_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",
}

uj5u.com熱心網友回復：

你可以映射你的欄位，按照你想要的順序看到，然后使用鍵獲取值，

注冊

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

uj5u.com熱心網友回復：

您可以通過迭代陣列物件來簡單地實作它。

作業演示：

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

標籤：javascript Vue.js ecmascript-6 html表

上一篇：React中基于State動態更新值

下一篇：在JSON檔案中的坐標之間畫線