У меня есть таблица, в которой есть функция, отображающая только выбранные столбцы.
Я храню выбранные столбцы (заголовки таблиц) в массиве 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",
}
Вы можете просто добиться этого, повторяя объект массива.
Рабочая демонстрация:
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.info(res);
В этом случае вам необходимо глубоко скопировать исходный объект, и только тогда вы сможете выполнить это требование.
Джиндал, у тебя есть пример?
В этом случае мне нужно создать целую демонстрацию, и это займет больше времени :(
У меня уже работает, спасибо.
Вы можете просто сопоставить свои поля, которые уже видны в том порядке, в котором вы хотите, а затем получить значения с помощью ключей,
рег.
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.info(filter(tableData, selectedTableHeaders));
В этом примере удаленное свойство добавляется в массив, когда я снова выбираю удаленное свойство. И это хорошо. Но если пользователь включает и выключает столбец, и когда столбец включен, значение свойства не определено.
@ Не уверен на 100%, что вы имеете в виду, это ничего не меняет, поэтому переключение должно быть последовательным в зависимости от того, что вы ввели selectTableHeaders
.
Вы правы, но сортировка неправильная, например, данные из заголовка 2 попадают в заголовок 4, когда я играю с включением и выключением заголовков.
@Can Сортировка основана на том, что находится в selectTableHeaders
, вы не показываете, как вы обновляете это, поэтому, вероятно, этот бит теперь неверен. Если вы просто добавляете удаление из массива, вы можете просто сделать -> selectTableHeaders.sort()
хорошо, это работает по большей части, но когда пользователь хочет снова добавить удаленную строку, она больше не добавляется? Пользователь должен иметь возможность включать и выключать столбцы. Так, например: если пользователь выключает
table_header_5
, а затем снова включает, это нужно снова добавить в данные таблицы.