我有一個“產品”陣列，它由多個物件組成，就像下面陣列中的物件一樣。實際的陣列有更多的產品，價格、影像等更多，但所有這些的結構都是相同的。
const products = [
{
"id": "some_id",
"name": "some_name",
"brand": "some_brandName",
"inStock": true,
"gallery": [
"some_url_to_image"
],
"category": "some_category_name",
"attributes": [
{
"id": "Size",
"name": "Size",
"type": "text",
"items": [
{
"displayValue": "40",
"value": "40",
"id": "40"
},
{
"displayValue": "41",
"value": "41",
"id": "41"
},
{
"displayValue": "42",
"value": "42",
"id": "42"
},
{
"displayValue": "43",
"value": "43",
"id": "43"
}
]
},
{
"id": "Color",
"name": "Color",
"type": "swatch",
"items": [
{
"displayValue": "Green",
"value": "#44FF03",
"id": "Green"
},
{
"displayValue": "Cyan",
"value": "#03FFF7",
"id": "Cyan"
},
{
"displayValue": "Blue",
"value": "#030BFF",
"id": "Blue"
},
{
"displayValue": "Black",
"value": "#000000",
"id": "Black"
},
{
"displayValue": "White",
"value": "#FFFFFF",
"id": "White"
}
]
},
{
"id": "Capacity",
"name": "Capacity",
"type": "text",
"items": [
{
"displayValue": "512G",
"value": "512G",
"id": "512G"
},
{
"displayValue": "1T",
"value": "1T",
"id": "1T"
}
]
}
],
"prices": [
{
"currency": {
"label": "USD",
"symbol": "$"
},
"amount": 55.00
},
]
},
];
我還有一個“過濾器”物件陣列，其中包含一個或多個引數的值，這些引數需要用于過濾掉“產品”陣列。
const filters = [
{
"name": "Color",
"value": "FFFFFF"
},
{
"name": "Size",
"value": "42"
}
];
問題
我想使用在“filters”陣列中找到的值來過濾掉“products”陣列以僅包含“products[index].attributes”陣列包含“filters”陣列中所有鍵/值對的產品。例如，如果“filters”陣列有一個名為“Size”且值為“42”的物件，則“products”陣列應被過濾為僅包含其“attributes”陣列包含這些值的產品。
我知道 Javascript 有 .filter() 方法，我知道如何使用它來過濾出一個簡單的陣列，但是當涉及到這樣一個包含許多嵌套物件等的陣列時，我不知道如何完成這個無需使用大量的嵌套函式。
過濾掉串列的最快/最簡單的方法是什么？
uj5u.com熱心網友回復：
const products = [
{
"id": "some_id",
"name": "some_name",
"brand": "some_brandName",
"inStock": true,
"gallery": [
"some_url_to_image"
],
"category": "some_category_name",
"attributes": [
{
"id": "Size",
"name": "Size",
"type": "text",
"items": [
{
"displayValue": "40",
"value": "40",
"id": "40"
},
{
"displayValue": "41",
"value": "41",
"id": "41"
},
{
"displayValue": "42",
"value": "42",
"id": "42"
},
{
"displayValue": "43",
"value": "43",
"id": "43"
}
]
},
{
"id": "Color",
"name": "Color",
"type": "text",
"items": [
{
"displayValue": "FFFFFF",
"value": "FFFFFF",
"id": "FFFFFF"
}
]
},
],
"prices": [
{
"currency": {
"label": "USD",
"symbol": "$"
},
"amount": 55.00
},
]
},
];
const filters = [
{
"name": "Color",
"value": "FFFFFF"
},
{
"name": "Size",
"value": "40"
}
];
// So ofcourse we want to write a filter to filter out the products we want
let filtered = products.filter( (p) => {
let filteredOut = false
// We have multiple filters, so we have to foreach those
filters.forEach((filter) => {
// Now we have to find the correct attribute to check our value with
currentAttribute = p.attributes.find(product => p.name = filter.name)
// We have multiple options to check with so also foreach this
currentAttribute.items.forEach(item => {
if (filter.value === item.value) {
// If we find one, we return because we just want one hit
filteredOut = true
return
}
})
})
return filteredOut
})
console.log(filtered)uj5u.com熱心網友回復：
我嘗試使用@Wimanicesir 的答案，但它回傳了一些錯誤（'無法讀取未定義'）并且沒有根據多個引數過濾產品串列。相反，我撰寫的“filterProductList”函式會過濾產品串列并且不會引發錯誤。感謝@Wimanicesir 提醒我有關 .find() 的資訊，這有助于我縮短以前的代碼。
const products = [
{
"id": "some_id",
"name": "some_name",
"brand": "some_brandName",
"inStock": true,
"gallery": [
"some_url_to_image"
],
"category": "some_category_name",
"attributes": [
{
"id": "Size",
"name": "Size",
"type": "text",
"items": [
{
"displayValue": "40",
"value": "40",
"id": "40"
},
{
"displayValue": "41",
"value": "41",
"id": "41"
},
{
"displayValue": "42",
"value": "42",
"id": "42"
},
{
"displayValue": "43",
"value": "43",
"id": "43"
}
]
},
{
"id": "Color",
"name": "Color",
"type": "text",
"items": [
{
"displayValue": "FFFFFF",
"value": "FFFFFF",
"id": "FFFFFF"
}
]
},
],
"prices": [
{
"currency": {
"label": "USD",
"symbol": "$"
},
"amount": 55.00
},
]
},
];
const filters = [
{
"name": "Color",
"value": "FFFFFF"
},
{
"name": "Size",
"value": "40"
}
];
const filterProductList = (filters, products) => {
return products.filter(product => filters.every(filter => {
const key = product.attributes.find(attribute => attribute.name === filter[0]);
const value = key !== undefined ? key.items.find(item => item.value === filter[1]) : undefined;
const filteredProduct = value !== undefined ? product : false;
return filteredProduct;
}))
}
console.log(filterProductList(filters, products));
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/504528.html
標籤：javascript 数组 表现 目的 筛选
上一篇：js從字串生成物件