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

将SELECT COUNT(*) FROM ZCQ Z WHERE Z.QUOTE_CUSTOMER_ID IN (SELECT CUSTOMER_ID FROM CUST_ORDER) -- returned 6,646 RECS SELECT COUNT(*) FROM ZCQ Z INNER JOIN CUST_ORDER CO ON zquote_customer_id = co.customer_id -- returned 4,232,473 RECS中的forEach替换为this.getAllProducts.products.forEach(...)。

像这样：

filter

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

使用forEach之后，通过javascript过滤dropdwon不会引发任何结果，然后过滤查询

2 个答案: