Как вывести объект при помощи массива(или другие варианты вывода объекта)?

Question

[urajo]

Есть массив условно

["Первый", "Второй"];

Есть объект со вложенными объектами

{
"Первый":
0: {id: 8, branch: "Административные службы"}
"Второй":
0: {id: 1, branch: "Администрация"}
1: {id: 2, branch: "Администрация"}
}

Мне нужно все это вывести в таблицу т.е заголовок таблицы "первый" и все что из соответствующего объекта - выводится под ним. Затем Заголовок "Второй" И выводится все из этого объекта. Какие варианты есть?

Answer 1

[0xD34F]

Массив и объект, например.

const arr = [ '***', '+++' ];

const obj = {
  '!!!': [
    { id: 0, text: 'fjdklsfjklds' },
  ],
  '+++': [
    { id:  3, a: '111', b: '!!!' },
    { id:  9, a: '222', b: '???' },
    { id: 27, a: '333', b: ':::' },
    { id: 81, a: '444', b: '...' },
  ],
  '***': [
    { id:  69, text: 'hello, world!!' },
    { id: 187, text: 'fuck the world' },
    { id: 666, text: 'fuck everything' },
  ],
};

Можно собирать разметку:

document.body.insertAdjacentHTML('beforeend', arr.map(n => {
  const columns = Object.keys(obj[n][0]);

  return `
    <h1>${n}</h1>
    <table>
      <thead>
        <tr>${columns.map(n => `
          <th>${n}</th>`).join('')}
        </tr>
      </thead>
      <tbody>${obj[n].map(row => `
        <tr>${columns.map(col => `
          <td>${row[col]}</td>`).join('')}
        </tr>`).join('')}
      </tbody>
    </table>`;
}).join(''));

Или, создавать элементы напрямую:

document.body.append(...arr.flatMap(n => {
  const columns = Object.keys(obj[n][0]);
  const header = document.createElement('h1');
  const table = document.createElement('table');

  header.textContent = n;

  table.createTHead().insertRow().append(...columns.reduce((acc, col) => (
    (acc[acc.length] = document.createElement('th')).textContent = col,
    acc
  ), []));

  obj[n].forEach(function(row) {
    const tr = this.insertRow();
    columns.forEach(col => tr.insertCell().textContent = row[col]);
  }, table.createTBody());

  return [ header, table ];
}));