Как фильтровать и сортировать объект на основе определенных свойств?

У меня есть таблица, в которой есть функция, отображающая только выбранные столбцы.

Я храню выбранные столбцы (заголовки таблиц) в массиве 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",
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
35
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете просто добиться этого, повторяя объект массива.

Рабочая демонстрация:

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

хорошо, это работает по большей части, но когда пользователь хочет снова добавить удаленную строку, она больше не добавляется? Пользователь должен иметь возможность включать и выключать столбцы. Так, например: если пользователь выключает table_header_5, а затем снова включает, это нужно снова добавить в данные таблицы.

Can 05.04.2022 14:10

В этом случае вам необходимо глубоко скопировать исходный объект, и только тогда вы сможете выполнить это требование.

Rohìt Jíndal 05.04.2022 14:12

Джиндал, у тебя есть пример?

Can 05.04.2022 14:15

В этом случае мне нужно создать целую демонстрацию, и это займет больше времени :(

Rohìt Jíndal 05.04.2022 15:31

У меня уже работает, спасибо.

Can 05.04.2022 15:48
Ответ принят как подходящий

Вы можете просто сопоставить свои поля, которые уже видны в том порядке, в котором вы хотите, а затем получить значения с помощью ключей,

рег.

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

В этом примере удаленное свойство добавляется в массив, когда я снова выбираю удаленное свойство. И это хорошо. Но если пользователь включает и выключает столбец, и когда столбец включен, значение свойства не определено.

Can 05.04.2022 14:15

@ Не уверен на 100%, что вы имеете в виду, это ничего не меняет, поэтому переключение должно быть последовательным в зависимости от того, что вы ввели selectTableHeaders.

Keith 05.04.2022 14:18

Вы правы, но сортировка неправильная, например, данные из заголовка 2 попадают в заголовок 4, когда я играю с включением и выключением заголовков.

Can 05.04.2022 14:23

@Can Сортировка основана на том, что находится в selectTableHeaders, вы не показываете, как вы обновляете это, поэтому, вероятно, этот бит теперь неверен. Если вы просто добавляете удаление из массива, вы можете просто сделать -> selectTableHeaders.sort()

Keith 05.04.2022 14:34

Другие вопросы по теме