在使用forEach然后过滤查询后通过javascript中的下拉列表进行过滤不会抛出任何结果

Question

开发者好，我正在开发这个应用程序，现在正在使用下拉列表过滤元素，查询 json 对象并将其与下拉列表中的选定元素进行比较。 但是任何时候我只选择一个元素它都不会显示任何结果。 这是我的 json 对象，它由一个名为“getAllProducts”的 getter 访问：

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

将this.getAllProducts.products.forEach(...) 中的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
});

Answer 2

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