Фильтрация через dropdwon в javascript не выдает никакого результата после использования forEach, а затем фильтрует запрос

Question

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

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

, затем в моих методах я объявляю функцию, которая ранее нацелена на глобальную переменную с v-моделированием, которая следует некоторому тегу в моем html, который был импортирован из одного из компонентов приложения (все это прекрасно работает). Давайте скажем:

SCRIPT

data(){
 return{
     CategoriesDropDown: "",
 }
},
methods:{
 filterSearch(selectedCategory) {
      this.CategoriesDropDown = selectedCategory;
 },
}

Затем, на моем последнем шаге, пока я пытаюсь отфильтровать все свои элементы с помощью this.CategoriesDropDown, это не работает, только при выборе какой-либо категории моего dropDown все мои продукты исчезают. Здесь я устанавливаю функцию, которая обращается к объекту json по сравнению с выбранным параметром в раскрывающемся списке, должен фильтроваться, но не работает:

COMPUTED

   callProducts() {
       if (this.CategoriesDropDown) {
        return this.getAllProducts.products.forEach(categories => {
          return categories.product_category.filter(string => {
            return  string.categories_of_product.toUpperCase() === this.CategoriesDropDown.toUpperCase()
            ;
          });
        });
      } else {
        return this.getAllProducts.products;
    }
  },

Здесь, когда я ничего не выбираю

Здесь, когда какой-либо из пунктов выбран

Любые советы о том, как я могу улучшить эту последнюю функцию, чтобы правильно фильтровать мои продукты?. Заранее спасибо !!!

Answer 1

Array.prototype.forEach возвращает undefined. Всегда!

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach

Таким образом, вы должны пересмотреть свой код, чтобы избежать этого forEach

 callProducts() {
       if (this.CategoriesDropDown) {
        return this.getAllProducts.products.filter(categories => {
          return categories.product_category.some((string => {
            return  string.categories_of_product.toUpperCase() === this.CategoriesDropDown.toUpperCase()
          })
        });
      } else {
        return this.getAllProducts.products;
    }
  }

Answer 2

Заменить forEach в this.getAllProducts.products.forEach(...) на filter.

Примерно так:

return this.getAllProducts.products.filter(categories => { // return only some products
  return categories.product_category.filter(string => {
    return  string.categories_of_product.toUpperCase() === this.CategoriesDropDown.toUpperCase()
  }).length !== 0 // check that product has selected category
});