只顯示匹配不同數組中所有值的項目列表

Question

我目前有一系列 selectedCategories 和產品列表，如下所示：

let selectedCategories = []
let productList = []

和一個 JSON 產品列表，如下所示：

let products = [ 
    { 
        "id": 1, 
        ...
        "categories": [ 
            { "name": "Category 1", "count": 1 }, 
            { "name": "Category 2", "count": 1 }, 
            { "name": "Category 3", "count": 1 } 
        ], 
        ...
    }, 
    { 
        "id": 2, 
        ...
        "categories": [ 
            { "name": "Category 4", "count": 1 },
            { "name": "Category 5", "count": 2 }, 
            { "name": "Category 6", "count": 1 } 
        ], 
        ... 
    }, 
    { 
        "id": 3, 
        ...
        "categories": [ 
            { "name": "Category 5", "count": 1 } 
        ], 
        ...
    } 
]

我只想顯示與 selectedCategories 數組中的值匹配的產品。 我已經嘗試了every和includes，但似乎無法得到想要的結果：

this.products.filter(product => {
    product.categories.filter(category => {
        if (this.selectedCategories.includes(category.name)) {
            productList.push(product)
        }
    })
})

和

this.products.filter(product => {
    product.categories.filter(category => {
        this.selectedCategories.every(value => {
            if (value === category.name) {
                productList.push(product)
            }
        })
    })
})

問題是在上面的代碼中，它不檢查數組中的所有值是否匹配，而只檢查是否匹配。

希望的輸出是這樣的：

selectedCategories = [ "Category 5" ]
>>> productList = [{id: 2}, {id: 3}]

selectedCategories = [ "Category 5", "Category 4" ]
>>> productList = [{id: 2}]

我怎樣才能做到這一點？

編輯：

如何過濾產品對象中的多個數組？ 產品結構：

[ 
    { 
        "id": 1, 
        ...
        "categories": [ 
            { "name": "Category 1", "count": 1 }, 
            { "name": "Category 2", "count": 1 }, 
            { "name": "Category 3", "count": 1 } 
        ],
        "styles": [
            { name: "Style 1", count: 1 },
            { name: "Style 2", count: 1 },
        ] 
        ...
    }, 
    { 
        "id": 2, 
        ...
        "categories": [ 
            { "name": "Category 4", "count": 1 },
            { "name": "Category 5", "count": 2 }, 
            { "name": "Category 6", "count": 1 } 
        ],
        "styles": [
            { name: "Style 3", count: 1 },
            { name: "Style 4", count: 1 },
        ] 
        ... 
    }, 
    { 
        "id": 3, 
        ...
        "categories": [ 
            { "name": "Category 5", "count": 1 } 
        ],
        "styles": [
            { name: "Style 3", count: 1 },
        ] 
        ...
    } 
]

預期輸出：

selectedCategories = [ "Category 5" ]
>>> productList = [{id: 2}, {id: 3}]

selectedCategories = [ "Category 5", "Style 3" ]
>>> productList = [{id: 2}, {id: 3}]

selectedCategories = [ "Category 5", "Style 3", "Style 4" ]
>>> productList = [{id: 2}]

Answer 1

你需要filter + every + some + map來獲得你想要的輸出：

 const products = [ { "id": 1, "categories": [ { "name": "Category 1", "count": 1 }, { "name": "Category 2", "count": 1 }, { "name": "Category 3", "count": 1 } ], "styles": [ { name: "Style 1", count: 1 }, { name: "Style 2", count: 1 }, ] }, { "id": 2, "categories": [ { "name": "Category 4", "count": 1 }, { "name": "Category 5", "count": 2 }, { "name": "Category 6", "count": 1 } ], "styles": [ { name: "Style 3", count: 1 }, { name: "Style 4", count: 1 }, ] }, { "id": 3, "categories": [ { "name": "Category 5", "count": 1 } ], "styles": [ { name: "Style 3", count: 1 }, ] } ]; const selectedCategories = [ "Category 5", "Style 3", "Style 4" ] const result = products.filter(p=>selectedCategories.every(k=>p.categories.some(t=>t.name==k) || p.styles.some(s=>s.name==k))).map(({id})=>({id})); console.log(result);

Answer 2

您可以結合使用filter和every

const getProductList = (products, selectedCategories) => {
  return products
    .filter((product) => {
      const productCategories = product.categories.map(
        (category) => category.name
      )
      return selectedCategories.every((selectedCategory) =>
        productCategories.includes(selectedCategory)
      )
    })
    .map((product) => ({ id: product.id }))
}

完整演示

 const products = [ { id: 1, categories: [ { name: "Category 1", count: 1 }, { name: "Category 2", count: 1 }, { name: "Category 3", count: 1 }, ], }, { id: 2, categories: [ { name: "Category 4", count: 1 }, { name: "Category 5", count: 2 }, { name: "Category 6", count: 1 }, ], }, { id: 3, categories: [{ name: "Category 5", count: 1 }], }, ] const getProductList = (products, selectedCategories) => { return products .filter((product) => { const productCategories = product.categories.map( (category) => category.name ) return selectedCategories.every((selectedCategory) => productCategories.includes(selectedCategory) ) }) .map((product) => ({ id: product.id })) } console.log(getProductList(products, ["Category 5"])) console.log(getProductList(products, ["Category 5", "Category 4"]))

 .as-console-wrapper { max-height: 100% !important; }

Answer 3

您應該在數組方法中return （使用return關鍵字或使用箭頭函數的隱式返回）以使它們有用。 過濾后，將每個.map到僅包含 ID 的對象：

 const getFiltered = (selectedCategories) => { const productList = products .filter(({ categories }) => selectedCategories.every( requiredCat => categories.some( prodCat => prodCat.name === requiredCat ) )) .map(({ id }) => ({ id })); console.log(productList); }; const products = [ { "id": 1, "categories": [ { "name": "Category 1", "count": 1 }, { "name": "Category 2", "count": 1 }, { "name": "Category 3", "count": 1 } ], }, { "id": 2, "categories": [ { "name": "Category 4", "count": 1 }, { "name": "Category 5", "count": 2 }, { "name": "Category 6", "count": 1 } ], }, { "id": 3, "categories": [ { "name": "Category 5", "count": 1 } ], } ]; getFiltered(['Category 5', 'Category 4']); getFiltered(['Category 5']);

Answer 4

您還需要迭代類別。

 const filterByCategories = (products, categories) => products.filter(product => categories.every(category => product.categories.some(c => category === c.name) ) ), products = [{ id: 1, categories: [{ name: "Category 1", count: 1 }, { name: "Category 2", count: 1 }, { name: "Category 3", count: 1 }] }, { id: 2, categories: [{ name: "Category 4", count: 1 }, { name: "Category 5", count: 2 }, { name: "Category 6", count: 1 }] }, { id: 3, categories: [{ name: "Category 5", count: 1 }] }]; console.log(filterByCategories(products, ["Category 5"])); [{id: 2}, {id: 3}] console.log(filterByCategories(products, ["Category 5", "Category 4"])); [{id: 2}]