Заполните раскрывающийся список из массивов вложенных объектов уникальными значениями в Vue. js

Question

Добрый день, разработчики, я просто пытаюсь заполнить свой выпадающий фильтр набором неповторяющихся категорий, которые есть у нескольких продуктов в моем приложении, все логики c о выпадающем меню уже настроены, но из-за характеристика c моего Json объекта довольно сложна для меня, чтобы получить набор уникальных значений категорий при итерации по нему. Более или менее его структура будет выглядеть следующим образом:

{
   "user":null,
   "products":[
      {
         "product_name":"Chain Saw",
         "product_category":[
            {
               "categories_of_product":"Good"
            },
            {
               "categories_of_product":"Danger"
            },
            {
               "categories_of_product":"Homer"
            }
         ]
      },
      {
         "product_name":"Chuky",
         "product_category":[
            {
               "categories_of_product":"Danger"
            },
            {
               "categories_of_product":"Homer"
            }
         ]
      },
      {
         "product_name":"Glasses",
         "product_category":[
            {
               "categories_of_product":"Good"
            },
            {
               "categories_of_product":"Homer"
            }
         ]
      },
      {
         "product_name":"Tile",
         "product_category":[
            {
               "categories_of_product":"Horror"
            },
            {
               "categories_of_product":"Homer"
            }
         ]
      },
      {
         "product_name":"Mouse",
         "product_category":[
            {
               "categories_of_product":"Homer"
            }
         ]
      },
      {
         "product_name":"rino",
         "product_category":[
            {
               "categories_of_product":"Zoo"
            },
            {
               "categories_of_product":"Park"
            }
         ]
      },
      {
         "product_name":"Chain Saw",
         "product_category":[
            {
               "categories_of_product":"Homer"
            },
            {
               "categories_of_product":"Horror"
            }
         ]
      },
      {
         "product_name":"Chain Saw1",
         "product_category":[
            {
               "categories_of_product":"Homer"
            },
            {
               "categories_of_product":"Good"
            }
         ]
      },
      {
         "product_name":"Chain Saw2",
         "product_category":[
            {
               "categories_of_product":"Good"
            }
         ]
      },
      {
         "product_name":"rino1",
         "product_category":[
            {
               "categories_of_product":"Zoo"
            },
            {
               "categories_of_product":"Animal"
            }
         ]
      }
   ]
}

Допустим, чтобы сохранить поток, я объявляю метод получения, который принесет мне весь объект json, назвав его "getAllProducts" и разработав все logi c в моих вычисленных свойствах я создал функцию с именем "getCategories", ожидая, что у меня получится набор неповторяющихся категорий для заполнения моего раскрывающегося списка следующим образом:

[Good,Danger,Homer,Horror,Zoo,Park,Animal]

Будучи каждым Элемент этого массива опция в раскрывающемся списке, но я получаю этот результат: Вот функция, которую я объявляю, но не работает:

COMPUTED PROPS

    getCategories() {
      this.getAllProducts.products.forEach(element => {
        return Array.from(
          new Set(
            element.product_category.map(
              category => category.categories_of_product
            )
          )
        );
      });

Но не ' t работа!. Любая идея или совет о том, как я мог получить этот набор уникальных категорий, чтобы заполнить мой выпадающий список? Заранее спасибо!!!. Хорошего дня !!

Answer 1

Объявите набор перед итерациями по вашему возвращенному массиву, и внутри каждой итерации добавьте элементы сопоставленного массива и, наконец, верните массив из этого набора:

  getCategories() {
      let s=new Set();
      this.getAllProducts.products.forEach(element => {
            element.product_category.map(
              category => {s.add(category.categories_of_product)}
            )

      });
   return  Array.from(s);
 }