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

user_5014559 0
Viewed 144

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",
}
vue.js ecmascript-6 html-table javascript
2 Answers

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

user_41163000

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

user_68702280
Related