Fill a dropdown from nested object arrays with unique values in Vue.js

Question

Good day developers, i'm just trying to fill my drop down filter with a set of non repeated categories that several products in my app have , all the logic about the drop down is already set but due to the characteristic of my Json object is kind of hard for me to get a set of unique categories values on iteration over it. More or less its structure would be like this:

{
   "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"
            }
         ]
      }
   ]
}

Lets say in order to keep the thread i declare a getter which would bring me all json object, calling it "getAllProducts", and developing all the logic on my computed properties i created a function called "getCategories", expecting to have a result which throws me a set of non repeated categories to fill my dropdown like this:

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

Being each element of this array an option in the drop down , but i receive this result : Here is the function i declare but doesn't work:

COMPUTED PROPS

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

But doesn't work !.Any idea or advice about how could i get this set of unique categories to fill my drop down? Thanks in advance!!!. Have a great Day!!

Wai Ha Lee · Accepted Answer · 2020-04-10 11:36:59Z

2

Declare a set before the iterations over your returned array and inside each iteration add the mapped array items and finally return an array from that set :

  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);
 }

edited Apr 10, 2020 at 11:36

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Apr 9, 2020 at 22:15

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Enrique GF Over a year ago

keeps giving me the same result Boussadjra...really thanks for your help anyway!!!

Enrique GF Over a year ago

how can i do that ?

Collectives™ on Stack Overflow

Fill a dropdown from nested object arrays with unique values in Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related