Создание таблицы из массива объектов

Question

Создание таблицы из массива объектов

Рейтинг: 0Ответов: 1Опубликовано: 17.04.2023

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

let table = document.getElementById('table')

let arr = [
    { description: 'Болт М6',   storage_num: 34, sender: 'Сорокин Феликс Геннадьевич',      recipient: 'Харитонов Лукьян Онисимович',     workshop: 'Цех 46', quantity: 9012 },
    { description: 'Болт М6',   storage_num: 56, sender: 'Жуков Демьян Куприянович',        recipient: 'Борисов Адриан Павлович',         workshop: 'Цех 46', quantity: 162 },
    { description: 'Болт М6',   storage_num: 34, sender: 'Блохин Адольф Богуславович',      recipient: 'Савельев Рубен Лаврентьевич',     workshop: 'Цех 46', quantity: 13452 },
    { description: 'Гайка М6',  storage_num: 56, sender: 'Потапов Денис Мартынович',        recipient: 'Субботин Архип Владленович',      workshop: 'Цех 81', quantity: 34512 },
    { description: 'Болт М6',   storage_num: 56, sender: 'Рябов Овидий Александрович',      recipient: 'Королёв Аверьян Демьянович',      workshop: 'Цех 46', quantity: 1205 },
    { description: 'Болт М6',   storage_num: 34, sender: 'Ермаков Савелий Проклович',       recipient: 'Калашников Захар Викторович',     workshop: 'Цех 46', quantity: 14245 },
    { description: 'Болт М6',   storage_num: 3,  sender: 'Беляев Платон Оскарович',         recipient: 'Терентьев Нелли Эдуардович',      workshop: 'Цех 4',  quantity: 345612 },
    { description: 'Гайка М6',  storage_num: 56, sender: 'Морозов Кассиан Ростиславович',   recipient: 'Марков Корнелий Дамирович',       workshop: 'Цех 81', quantity: 345612 },
    { description: 'Болт М6',   storage_num: 3,  sender: 'Белозёров Лаврентий Донатович',   recipient: 'Дроздов Ефрем Даниилович',        workshop: 'Цех 4',  quantity: 162 },
    { description: 'Болт М6',   storage_num: 34, sender: 'Емельянов Лавр Донатович',        recipient: 'Гришин Карл Артемович',           workshop: 'Цех 46', quantity: 34512 },
    { description: 'Гайка М6',  storage_num: 56, sender: 'Федотов Севастьян Александрович', recipient: 'Корнилов Феликс Ильяович',        workshop: 'Цех 81', quantity: 34512 },
    { description: 'Гайка М6',  storage_num: 56, sender: 'Артемьев Арнольд Антонинович',    recipient: 'Захаров Кассиан Филиппович',      workshop: 'Цех 81', quantity: 345612 },
    { description: 'Гайка М6',  storage_num: 3,  sender: 'Кириллов Захар Еремеевич',        recipient: 'Воронов Ибрагил Васильевич',      workshop: 'Цех 81', quantity: 412 },
    { description: 'Гайка М6',  storage_num: 56, sender: 'Маслов Герман Филатович',         recipient: 'Осипов Виктор Тарасович',         workshop: 'Цех 81', quantity: 354612 },
    { description: 'Гайка М6',  storage_num: 3,  sender: 'Якушев Андрей Русланович',        recipient: 'Шарапов Адам Лаврентьевич',       workshop: 'Цех 8',  quantity: 4512 },
    { description: 'Шуруп',     storage_num: 3,  sender: 'Харитонов Афанасий Наумович',     recipient: 'Хохлов Адам Игоревич',            workshop: 'Цех 81', quantity: 35412 },
    { description: 'Гайка М6',  storage_num: 3,  sender: 'Шилов Вольдемар Христофорович',   recipient: 'Юдин Арнольд Геласьевич',         workshop: 'Цех 8',  quantity: 35612 },
    { description: 'Шуруп',     storage_num: 56, sender: 'Миронов Евдоким Матвеевич',       recipient: 'Ширяев Терентий Владленович',     workshop: 'Цех 8',  quantity: 4512 },
    { description: 'Шуруп',     storage_num: 3,  sender: 'Терентьев Пантелеймон Матвеевич', recipient: 'Иванов Август Глебович',          workshop: 'Цех 8',  quantity: 34512 },
    { description: 'Винт',      storage_num: 34, sender: 'Гришин Карл Филатович',           recipient: 'Авдеев Нелли Денисович',          workshop: 'Цех 81', quantity: 712 },
    { description: 'Винт',      storage_num: 34, sender: 'Баранов Аверьян Федотович',       recipient: 'Тетерин Станислав Макарович',     workshop: 'Цех 46', quantity: 34512 },
    { description: 'Корпус',    storage_num: 2,  sender: 'Бобров Венедикт Всеволодович',    recipient: 'Дьячков Владлен Пантелеймонович', workshop: 'Цех 81', quantity: 34512 },
    { description: 'Корпус',    storage_num: 2,  sender: 'Пестов Кондрат Серапионович',     recipient: 'Наумов Матвей Евгеньевич',        workshop: 'Цех 4',  quantity: 312 },
    { description: 'Корпус',    storage_num: 56, sender: 'Дементьев Тарас Валерьянович',    recipient: 'Кириллов Корнелий Рубенович',     workshop: 'Цех 81', quantity: 112 },
    { description: 'Шуруп',     storage_num: 56, sender: 'Беляев Зиновий Авдеевич',         recipient: 'Ширяев Тихон Агафонович',         workshop: 'Цех 46', quantity: 345612 },
    { description: 'Шуруп',     storage_num: 56, sender: 'Воронов Арнольд Константинович',  recipient: 'Тарасов Эрик Куприянович',        workshop: 'Цех 81', quantity: 34512 },
    { description: 'Шуруп',     storage_num: 3,  sender: 'Журавлёв Осип Лукьевич',          recipient: 'Кулаков Роман Мэлсович',          workshop: 'Цех 46', quantity: 912 },
    { description: 'Винт',      storage_num: 3,  sender: 'Буров Юстиниан Яковович',         recipient: 'Моисеев Эрнест Леонидович',       workshop: 'Цех 46', quantity: 512 },
    { description: 'Винт',      storage_num: 3,  sender: 'Буров Юстиниан Яковович',         recipient: 'Моисеев Эрнест Леонидович',       workshop: 'Цех 46', quantity: 512 },
    { description: 'Винт',      storage_num: 34, sender: 'Михайлов Май Мэлсович',           recipient: 'Гришин Илья Владимирович',        workshop: 'Цех 8',  quantity: 34512 },
    { description: 'Корпус',    storage_num: 56, sender: 'Мясников Дональд Аристархович',   recipient: 'Горбунов Давид Андреевич',        workshop: 'Цех 46', quantity: 612 },
    { description: 'Винт',      storage_num: 3,  sender: 'Буров Юстиниан Яковович',         recipient: 'Моисеев Эрнест Леонидович',       workshop: 'Цех 46', quantity: 512 },
    { description: 'Корпус',    storage_num: 56, sender: 'Селезнёв Кассиан Макарович',      recipient: 'Тарасов Кондрат Даниилович',      workshop: 'Цех 4',  quantity: 712 },
    { description: 'Корпус',    storage_num: 56, sender: 'Михайлов Леонтий Адольфович',     recipient: 'Симонов Дональд Всеволодович',    workshop: 'Цех 81', quantity: 812 },
    { description: 'Кронштейн', storage_num: 1,  sender: 'Федотов Севастьян Александрович', recipient: 'Костин Денис Адольфович',         workshop: 'Цех 4',  quantity: 412 },
    { description: 'Винт',      storage_num: 3,  sender: 'Буров Юстиниан Яковович',         recipient: 'Моисеев Эрнест Леонидович',       workshop: 'Цех 46', quantity: 512 },
    { description: 'Провод',    storage_num: 56, sender: 'Якушев Андрей Русланович',        recipient: 'Шарапов Адам Лаврентьевич',       workshop: 'Цех 8',  quantity: 23412 },
    { description: 'Кронштейн', storage_num: 1,  sender: 'Артемьев Арнольд Антонинович',    recipient: 'Марков Лев Русланович',           workshop: 'Цех 81', quantity: 6512 },
    { description: 'Винт',      storage_num: 34, sender: 'Бобров Велор Романович',          recipient: 'Афанасьев Аристарх Андреевич',    workshop: 'Цех 81', quantity: 34512 },
    { description: 'Кронштейн', storage_num: 1,  sender: 'Маслов Герман Филатович',         recipient: 'Осипов Виктор Тарасович',         workshop: 'Цех 81', quantity: 3212 },
    { description: 'Кронштейн', storage_num: 34, sender: 'Кириллов Захар Еремеевич',        recipient: 'Воронов Ибрагил Васильевич',      workshop: 'Цех 8',  quantity: 4512 },
    { description: 'Провод',    storage_num: 67, sender: 'Шилов Вольдемар Христофорович',   recipient: 'Юдин Арнольд Геласьевич',         workshop: 'Цех 4',  quantity: 4512 },
    { description: 'Провод',    storage_num: 98, sender: 'Харитонов Афанасий Наумович',     recipient: 'Моисеев Эрнест Леонидович',       workshop: 'Цех 4',  quantity: 234512 },
    { description: 'Провод',    storage_num: 56, sender: 'Терентьев Пантелеймон Матвеевич', recipient: 'Кулаков Роман Мэлсович',          workshop: 'Цех 4',  quantity: 234512 },
    { description: 'Труба',     storage_num: 52, sender: 'Воронов Арнольд Константинович',  recipient: 'Тетерин Станислав Макарович',     workshop: 'Цех 4',  quantity: 23412 },
    { description: 'Труба',     storage_num: 52, sender: 'Миронов Евдоким Матвеевич',       recipient: 'Авдеев Нелли Денисович',          workshop: 'Цех 8',  quantity: 234512 },
  ]

for (let j = 0; j < arr.length; j++) {
    let tr = document.createElement('tr')

    for (let i = 0; i < arr[j].length; i++) {
        let td = document.createElement('td')
        td.append(arr[j][i])
        tr.append(td)

    }
    table.append(tr)
}

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Можно воспользоваться методом insertRow

Также заранее выделить список всех полей для того, чтобы было проще работать с таблицей. Также, обращаясь к имени поля правильнее, так как нет гарантии что поля стоят в том порядке, в котором нам надо (это можно гарантировать в порядке нашего массива)

const fields = ["description", "storage_num", "sender", "recipient", "workshop", "quantity"]

function fillCell(row, value) {
  fields.forEach((item, index) => {
    let cell = row.insertCell(index);
    cell.innerHTML = value[item];
  })

}

let table = document.getElementById('tbody')

let arr = [{
    description: 'Болт М6',
    storage_num: 34,
    sender: 'Сорокин Феликс Геннадьевич',
    recipient: 'Харитонов Лукьян Онисимович',
    workshop: 'Цех 46',
    quantity: 9012
  },
  {
    description: 'Болт М6',
    storage_num: 56,
    sender: 'Жуков Демьян Куприянович',
    recipient: 'Борисов Адриан Павлович',
    workshop: 'Цех 46',
    quantity: 162
  },
  {
    description: 'Болт М6',
    storage_num: 34,
    sender: 'Блохин Адольф Богуславович',
    recipient: 'Савельев Рубен Лаврентьевич',
    workshop: 'Цех 46',
    quantity: 13452
  }
]

for (let j = 0; j < arr.length; j++) {
  let row = table.insertRow(0);
  fillCell(row, arr[j]);
}

table,
td {
  border: 1px solid black;
}

<table id="table">
  <thead>
    <tr>
      <td>description</td>
      <td>storage_num</td>
      <td>sender</td>
      <td>recipient</td>
      <td>workshop</td>
      <td>quantity</td>
    </tr>
  </thead>
  <tbody id="tbody"></tbody>
</table>

Создание таблицы из массива объектов

Ответы