Как показывать определенные данные из вложенных массивов?

Question

[Eugene Chefranov]

Имеется массив объектов:

[
    {
        "ArmorProtective_LowerBody": [
            {
                "classification": "Редкая",
                "dexterityRequirement": 158,
                "dropsIn": "Эпос",
                "intelligenceRequirement": 361,
                "itemLevel": 55,
                "name": "Поножи знахаря",
                "properties": {
                    "characterManaRegenModifier": "+30% восстановления энергии",
                    "characterRunSpeedModifier": "+10% скорости перемещения",
                    "defensiveElementalResistance": "20% сопротивление силам природы",
                    "defensiveProtection": "172 ед. защиты"
                },
                "tag": "xtagMIArmor010"
            },
            {
                "classification": "Редкая",
                "dropsIn": "Эпос",
                "itemLevel": 55,
                "name": "Лягушачьи поножи",
                "properties": {
                    "characterDefensiveAbility": "+80 ед. оборонительной способности",
                    "characterDodgePercent": "5% шанс уклониться от атаки",
                    "defensiveProtection": "292 ед. защиты"
                },
                "strengthRequirement": 320,
                "tag": "xtagMIArmor011"
            }
        ]
    },
    {
        "ArmorProtective_Head": [
            {
                "classification": "Редкая",
                "dexterityRequirement": 162,
                "dropsIn": "Эпос",
                "intelligenceRequirement": 372,
                "itemLevel": 57,
                "name": "Корона ночной госпожи",
                "properties": {
                    "characterEnergyAbsorptionPercent": "7% поглощения энергии от заклятий",
                    "characterManaRegenModifier": "+30% восстановления энергии",
                    "defensiveProtection": "176 ед. защиты",
                    "offensiveElementalModifier": "+15% урона силами природы"
                },
                "tag": "xtagMIArmor022"
            },
            {
                "classification": "Редкая",
                "dexterityRequirement": 156,
                "dropsIn": "Эпос",
                "intelligenceRequirement": 355,
                "itemLevel": 54,
                "name": "Корона Мирмигки",
                "properties": {
                    "characterDefensiveAbility": "+60 ед. оборонительной способности",
                    "characterManaRegenModifier": "+30% восстановления энергии",
                    "defensiveLightning": "60% сопротивление молниям",
                    "defensiveProtection": "164 ед. защиты"
                },
                "tag": "xtagMIArmor023"
            }
        ]
    }
]

Вывожу данные так:

<div id="app">
        <a href="#" @click="run">click</a>
        <a href="#">Фильтр 1</a>
        <a href="#">Фильтр 2</a>
        
        <div class="bd">
            <div class="bd__item"  v-for="head in heads">
                <div class="bd__item-name">{{ head.name }}</div>
                <div class="bd__item-info">
                    <div v-for="(value, name, index) in head.properties">{{ value }}</div>
                </div>
            </div>
        </div>
    </div>

var app = new Vue({
  el: '#app',
  data: {
    heads: []
  },
  methods: {
    run: function() {
      fetch('../json/db_ru.json')
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          this.heads = data.equipment;
        });
    }
  },
});

Как по клику на ссылки Фильтр 1 и Фильтр 2 показывать объекты из ArmorProtective_Head и ArmorProtective_LowerBody соответственно?

Answer 1

[0xD34F]

data: () => ({
  filters: [ 'ArmorProtective_LowerBody', 'ArmorProtective_Head' ],
  activeFilter: null,
  ...


computed: {
  filteredHeads() {
    const f = this.activeFilter;
    return f
      ? this.heads.flatMap(n => n[f]).filter(Boolean)
      : [];
  },
  ...

<a v-for="f in filters" @click="activeFilter = f">{{ f }}</a>
...


<div v-for="head in filteredHeads">
  ...

Comments

[Eugene Chefranov]

Немного изменил ваш код, но не пойму где ошибка
https://codepen.io/chefranov/pen/RzvogP

[0xD34F]

Eugene Chefranov, почитайте про стрелочные функции.

[Eugene Chefranov]

0xD34F, переделал участок кода так

return f ? this.items.flatMap(function(n) { return n[f] }).filter(Boolean) : [];

но как я понял, то секция computed уже срабатывает при создании приложения и массив еще пуст, а я получаю json и заполняю массив через какое-то время.
В codepen работает так как там уже вначале кусок массива объектов записан.
Как это можно обойти?

[0xD34F]

Eugene Chefranov, ОБОЙТИ ЧТО?

[Eugene Chefranov]

0xD34F, ну то что .flatMap() пытается работать с пустым массивом

[0xD34F]

Eugene Chefranov, а что не так? Пустой массив на входе - пустой массив на выходе.

[Eugene Chefranov]

0xD34F, тогда не пойму почему это не работает

[Eugene Chefranov]

0xD34F, такое пишет

computed: {
    filteredItems() {
      const f = this.activeFilter;
      return f ? this.items.flatMap(function(n) { return n[f] }).filter(Boolean) : [];
    }
  }

[0xD34F]

Eugene Chefranov, не работает потому, что вы соврали. Данные, которые вы показали в тексте вопроса - это массив. А тут - объект. У объектов никакого flatMap нет.

[Eugene Chefranov]

0xD34F, простите :( , невнимательно смотрел. Другим способом можно это решить?

[0xD34F]

Eugene Chefranov,

filteredItems() {
  return this.items[this.activeFilter] || [];
}

[Eugene Chefranov]

0xD34F, Спасибо! Работает!