我有一個包含唯一庫存 ID 和詳細資訊屬性的所有可用庫存商品的串列。從 UI 中，我收集客戶選擇，根據客戶選擇中的唯一值代碼，我想從庫存專案中找到所選專案。那是，
從availableStock中找到與customerSelection陣列串列中的值代碼屬性匹配的stockItem的最佳方法是什么？請看下面的例子：
const customerSelection = {
"tv": [
{
"value": "tv_40",
"label": "Flat Screen"
}
],
"keyboard": [
{
"value": "keyboard_40",
"label": "Wireless Keyboard"
}
],
"mouse": [
{
"value": "mouse_40",
"label": "Wireless Mouse"
}
]
};
const availableStock = [
{
"stockId": "elec_c1_f1",
"attributes": [
{
"label": "Flat Screen",
"value": "tv_41"
},
{
"label": "Wireless Keyboard",
"value": "keyboard_41"
},
{
"label": "Wireless Mouse",
"value": "mouse_41"
}
]
},
{
"stockId": "elec_c1_f2",
"attributes": [
{
"label": "Flat Screen",
"value": "tv_40"
},
{
"label": "Wireless Keyboard",
"value": "keyboard_40"
},
{
"label": "Wireless Mouse",
"value": "mouse_40"
}
]
},
{
"stockId": "elec_c1_f3",
"attributes": [
{
"label": "Flat Screen",
"value": "tv_42"
},
{
"label": "Wireless Keyboard",
"value": "keyboard_42"
},
{
"label": "Wireless Mouse",
"value": "mouse_42"
}
]
}
]
stockId 的預期結果（或只是 stockId）
const stockItem = {
"stockId": "elec_c1_f2",
"attributes": [
{
"label": "Flat Screen",
"value": "tv_40"
},
{
"label": "Wireless Keyboard",
"value": "keyboard_40"
},
{
"label": "Wireless Mouse",
"value": "mouse_40"
}
]
}
任何帶/不帶 lodash 的建議都值得贊賞。
uj5u.com熱心網友回復：
我建議創建一個requiredValues陣列，使用 Array.values()and Array.map()。
這看起來像：
[ "tv_40", "keyboard_40", "mouse_40" ]
然后，我們將使用Array.filter()其屬性中存在的每個必需值來查找所有庫存專案。
我們將使用Array.every(),Array.find()來確保專案屬性中存在每個必需的值。
這將回傳庫存專案的串列。
然后，我們可以映射以獲取匹配的股票 ID 串列：
const customerSelection = { "tv": [ { "value": "tv_40", "label": "Flat Screen" } ], "keyboard": [ { "value": "keyboard_40", "label": "Wireless Keyboard" } ], "mouse": [ { "value": "mouse_40", "label": "Wireless Mouse" } ] };
const availableStock = [ { "stockId": "elec_c1_f1", "attributes": [ { "label": "Flat Screen", "value": "tv_41" }, { "label": "Wireless Keyboard", "value": "keyboard_41" }, { "label": "Wireless Mouse", "value": "mouse_41" } ] }, { "stockId": "elec_c1_f2", "attributes": [ { "label": "Flat Screen", "value": "tv_40" }, { "label": "Wireless Keyboard", "value": "keyboard_40" }, { "label": "Wireless Mouse", "value": "mouse_40" } ] }, { "stockId": "elec_c1_f3", "attributes": [ { "label": "Flat Screen", "value": "tv_42" }, { "label": "Wireless Keyboard", "value": "keyboard_42" }, { "label": "Wireless Mouse", "value": "mouse_42" } ] } ]
// These values must be present in the attributes...
const requiredValues = Object.values(customerSelection).map(val => val[0].value);
// Use Array.filter() to find stock items that match _all_ required attributes...
const foundItems = availableStock.filter(item => {
return requiredValues.every(value => item.attributes.find(attr => attr.value === value));
});
console.log('Found stockIds:', foundItems.map(({ stockId }) => stockId));
console.log('Found items:', foundItems);.as-console-wrapper { max-height: 100% !important; top: 0; }您也可以在不requiredValues先構建陣列的情況下執行此操作，只需在 customerSelection 陣列上呼叫 .every() ：
const customerSelection = { "tv": [ { "value": "tv_40", "label": "Flat Screen" } ], "keyboard": [ { "value": "keyboard_40", "label": "Wireless Keyboard" } ], "mouse": [ { "value": "mouse_40", "label": "Wireless Mouse" } ] };
const availableStock = [ { "stockId": "elec_c1_f1", "attributes": [ { "label": "Flat Screen", "value": "tv_41" }, { "label": "Wireless Keyboard", "value": "keyboard_41" }, { "label": "Wireless Mouse", "value": "mouse_41" } ] }, { "stockId": "elec_c1_f2", "attributes": [ { "label": "Flat Screen", "value": "tv_40" }, { "label": "Wireless Keyboard", "value": "keyboard_40" }, { "label": "Wireless Mouse", "value": "mouse_40" } ] }, { "stockId": "elec_c1_f3", "attributes": [ { "label": "Flat Screen", "value": "tv_42" }, { "label": "Wireless Keyboard", "value": "keyboard_42" }, { "label": "Wireless Mouse", "value": "mouse_42" } ] } ]
const foundItems = availableStock.filter(item => {
return Object.values(customerSelection).every(([{ value }]) => {
return item.attributes.find(attr => attr.value === value);
});
});
console.log('Found stockIds:', foundItems.map(({ stockId }) => stockId));
console.log('Found items:', foundItems);.as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
首先從客戶選擇中獲取所有密鑰：
var values = Object.keys(customerSelection).map(element =>customerSelection[element][0].value)
然后使用以下代碼獲取matchedAvailableValues：
var matchedAvailableValues = availableStock.filter(element => values.includes(element.attributes[0].value) ? {stockId:element.stockId,attributes:element.attributes} : false);
所以你的最終代碼如下所示：
var values = Object.keys(customerSelection).map(element => customerSelection[element][0].value)
var matchedValues = availableStock.filter(element => values.includes(element.attributes[0].value) ? {stockId:element.stockId,attributes:element.attributes}:false);
uj5u.com熱心網友回復：
使用嵌套for..in回圈來導航這兩個物件。
const customerSelection = {
"tv": [
{
"value": "tv_41",
"label": "Flat Screen"
}
],
"keyboard": [
{
"value": "keyboard_40",
"label": "Wireless Keyboard"
}
],
"mouse": [
{
"value": "mouse_40",
"label": "Wireless Mouse"
}
]
};
const availableStock = [
{
"stockId": "elec_c1_f1",
"attributes": [
{
"label": "Flat Screen",
"value": "tv_41"
},
{
"label": "Wireless Keyboard",
"value": "keyboard_41"
},
{
"label": "Wireless Mouse",
"value": "mouse_41"
}
]
},
{
"stockId": "elec_c1_f2",
"attributes": [
{
"label": "Flat Screen",
"value": "tv_40"
},
{
"label": "Wireless Keyboard",
"value": "keyboard_40"
},
{
"label": "Wireless Mouse",
"value": "mouse_40"
}
]
},
{
"stockId": "elec_c1_f3",
"attributes": [
{
"label": "Flat Screen",
"value": "tv_42"
},
{
"label": "Wireless Keyboard",
"value": "keyboard_42"
},
{
"label": "Wireless Mouse",
"value": "mouse_42"
}
]
}
];
for (o in customerSelection)
for (p in availableStock)
for (q in availableStock[p].attributes)
if (customerSelection[o][0].value==availableStock[p].attributes[q].value) console.log(availableStock[p].stockId);轉載請註明出處，本文鏈接：https://www.uj5u.com/net/421967.html
標籤：
下一篇：Javascript嵌套物件遞回