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",
}
CodePudding user response:
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));
CodePudding user response:
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);