How to get property in 1 loop?

Question

JavaScript

There is json

spoiler

{
"ammo": [
{
"caliber": "11,43x23",
"items": [
{
"name": ".45 FMJ",
"caliber": "11,43x23",
"damage": "72",
"arm_pentra": "19",
"arm_damage": "36%",
"bullet_frag": "1%",
"speed": "285",
"ricochet": "7%"
},
{
"name": ".45 RIP",
"caliber": "11,43x23",
"damage": "72",
"arm_pentra": "19",
"arm_damage": "36%",
"bullet_frag": "1%",
"speed": "285",
"ricochet": "7%"
}
]
},
{
"caliber": "12,7x108",
"items": [
{
"name": "12.7Б3T",
"caliber": "12,7x108",
"damage": "199",
"arm_pentra": "80",
"arm_damage": "95%",
"bullet_frag": "17%",
"speed": "818",
"ricochet": "38%"
},
{
"name": "Б-32",
"caliber": "12,7x108",
"damage": "182",
"arm_pentra": "88",
"arm_damage": "88%",
"bullet_frag": "17%",
"speed": "818",
"ricochet": "38%"
}
]
},

I receive and store data in vuex storage.
To get the properties that are in the items, you have to do 2 cycles, but when building a table, the first cycle is either in the tbody (I get 18 tbody elements) or in the div (div inside the tbody), of course, this and that, it’s not permissible, it turns out, that all this needs to be done in 1 cycle, but I don’t understand how to do it, I also tried in vuex when receiving json, specify response.data.items, but it doesn’t help, tell me what are the options?

<table>
      <thead>
        <tr>
          <th scope="col">Наименование</th>
          <th scope="col">Калибр</th>
          <th scope="col">Урон</th>
          <th scope="col">Бронепробитие</th>
          <th scope="col">Повреждение брони</th>
          <th scope="col">Вероятность фрагментации</th>
          <th scope="col">Скорость (м/сек)</th>
          <th scope="col">Вероятность рикошет</th>
        </tr>
      </thead>
      <tbody>
        <div v-for="data in ammo_data" :key="data.caliber">
          <tr v-for="items in data.items" :key="items.name">
            <td data-label="Наименование">{{items.name}}</td>
            <td data-label="Калибр">{{items.caliber}}</td>
            <td data-label="Урон">{{items.damage}}</td>
            <td data-label="Бронепробитие">{{items.arm_pentra}}</td>
            <td data-label="Повреждение брони">{{items.arm_damage}}</td>
            <td data-label="Вероятность фрагментации">{{items.bullet_frag}}</td>
            <td data-label="Скорость (м/сек)">{{items.speed}}</td>
            <td data-label="Вероятность рикошет">{{items.ricochet}}</td>
          </tr>
        </div>
      </tbody>
    </table>

Answer 1

18 tbody <...> elements not allowed

Permissible. The specification does not limit the number of tbody elements.

div inside tbody

You can use template instead of div .

need to do 1 cycle

Computed property, inside flatMap , the output is a one-dimensional array.