Представление таблицы объектов

Введение

В этом практическом занятии мы изучим, как создать динамический компонент таблицы в React, используя массив объектов и список имен свойств. Компонент будет использовать различные методы массивов JavaScript, такие как Object.keys(), Array.prototype.filter(), Array.prototype.includes() и Array.prototype.reduce(), для фильтрации данных и отображения таблицы с указанными свойствами. В конце этого практического занятия вы будете лучше понимать, как отображать динамические таблицы в React.

Представление таблицы объектов

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавлять код в script.js и style.css.

Данный компонент отображает таблицу с рядами, динамически создаваемыми из массива объектов и списка имен свойств. Для этого необходимо:

• Использовать Object.keys(), Array.prototype.filter(), Array.prototype.includes() и Array.prototype.reduce() для получения массива filteredData, содержащего все объекты с ключами, указанными в propertyNames.
• Отрендерить элемент <table> с количеством столбцов, равным количеству значений в propertyNames.
• Использовать Array.prototype.map() для отображения каждого значения в массиве propertyNames в виде элемента <th>.
• Использовать Array.prototype.map() для отображения каждого объекта в массиве filteredData в виде элемента <tr>, содержащего <td> для каждого ключа в объекте.
• Обратите внимание, что этот компонент не работает с вложенными объектами и будет работать неправильно, если внутри любого из свойств, указанных в propertyNames, есть вложенные объекты.

Вот код:

const MappedTable = ({ data, propertyNames }) => {
  const filteredData = data.map((obj) =>
    Object.keys(obj)
      .filter((key) => propertyNames.includes(key))
      .reduce((acc, key) => ({ ...acc, [key]: obj[key] }), {})
  );

  return (
    <table>
      <thead>
        <tr>
          {propertyNames.map((name) => (
            <th key={`header-${name}`}>{name}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {filteredData.map((obj, i) => (
          <tr key={`row-${i}`}>
            {propertyNames.map((name) => (
              <td key={`cell-${i}-${name}`}>{obj[name]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Вы можете использовать компонент, передав в него массив объектов и список имен свойств:

const people = [
  { name: "John", surname: "Smith", age: 42 },
  { name: "Adam", surname: "Smith", gender: "male" }
];
const propertyNames = ["name", "surname", "age"];

ReactDOM.render(
  <MappedTable data={people} propertyNames={propertyNames} />,
  document.getElementById("root")
);

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по Представлению таблицы объектов. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.