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

Question

I have a table where I have a function that displays only the selected columns.

I store the selected columns (table headings) in an array selectedTableHeaders .

Now I want to make sure that I only display the selected columns in the table data.

So that means I want to create or filter a new array based on the properties stored in the selectedTableHeaders .

Furthermore, I want to make sure that the tableData is properly ordered, so if I for example disable table header 3 and then table header 6 and then enable 3 again, 3 is added later. That means that I also have to reorder the tableData based on the table headers.

How can I solve this?

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"
        }
    }
]

I have tried something like:

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

But then I don't get the values in the newArray. Is there a better way to handle this and get also the values of the properties in the new array? So I want to create a new array with only the selected columns.

And how can I make sure that the table data is well-ordered, based on the table headings.

So eg:

If this is the order for the headings:

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

That the rowData also becomes like this:

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

Answer 1

You can simply achieve it by iterating the array object.

Working Demo:

 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

You could just map your fields, seen as there already in the order you want, and then get the values using the keys,

reg.

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