Как избавиться от дублирования заголовков?

Question

[zilevsky]

На входе список:

[
    {
    "title": "ООО 'АЛЬФА'",
    "items": [
            {
            "number": "19555-КРД",
            "date": "2021-07-26T00:00:00",
            "isAnnulled": false,
            "isLocked": false
            }
        ]
    },
    {
    "title": "ООО 'СОВОК'",
    "items": [
            {
            "number": "А-222/803",
            "date": "2022-02-16T00:00:00",
            "isAnnulled": false,
            "isLocked": false
            },
            {
            "number": "А-222/802",
            "date": "2022-02-15T00:00:00",
            "isAnnulled": false,
            "isLocked": false
            }
        ]
    },
]

На выходе получаю

=== ООО "СОВОК" ===
number	        date	                        isAnnulled 	isLocked
number	        date	                        isAnnulled	isLocked
А-222/803	2022-02-16T00:00:00	        false	        false
А-222/802	2022-02-15T00:00:00	        false	        false

=== ООО "АЛЬФА" ===
number        date                  isAnnulled        isLocked
19555-КРД   2021-07-26T00:00:00	    false	        false

Как избавиться от дублирования заголовков?

Код:

<template>
  <div className="container">
    <div className="row">
      <div className="col-sm-10">
        <h1>Fedresurs</h1>
        <table v-for="messages in fedresurs" :key="messages" className="table table-bordered" class="fin_table">
          <thead>
            {{ messages.title }}
          </thead>
          <thead>
          <tr v-for="item in messages.items" :key="item">
            <th v-for="(item, key) in item" :key="key">
              {{ key }}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in messages.items" :key="item">
            <td v-for="(item, key) in item" :key="item">
              {{ item }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

Answer 1

[0xD34F]

computed: {
  columns() {
    return Object.keys(this.fedresurs.find(n => n.items.length)?.items[0] ?? {});
  },
},

<table v-for="messages in fedresurs">
  <caption>{{ messages.title }}</caption>
  <thead>
    <tr>
      <th v-for="column in columns">{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in messages.items">
      <td v-for="column in columns">{{ item[column] }}</td>
    </tr>
  </tbody>
</table>

Comments

[zilevsky]

Спасибо. Сработало.
Как правильно прочитать это условие?

.find(n => n.items.length)?.items[0] ?? {}

[0xD34F]

zilevsky,

find
?.
??

Типа, извлекается первый item, если такового нет, подставляется пустой объект.

Но если вы уверены, что fedresurs и вложенные items всегда непустые, то можно просто
Object.keys(this.fedresurs[0].items[0]).

[zilevsky]

Т.е. по сути формируем свою одну единственную строку с заголовками. Так?

[0xD34F]

zilevsky, не так. Получаем массив имён свойств. На основе которого уже потом создаётся строка с заголовками.

[zilevsky]

0xD34F, спасибо