[英]JS filter array by array within
我有如下數組
[{
"id": 68,
"proffesional_photo": "",
"top_image": "https://sampleimage.jpg",
"ratings": "1",
"price": 690,
"description": null,
"type": true,
"promo": 0,
"status": true,
"item": {
"Item_name": "Dark Chocolate Latte"
},
"restaurant_dish_menus": [
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 4,
"createdAt": "2018-11-13T04:28:17.000Z",
"updatedAt": "2018-11-13T04:28:17.000Z"
},
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 3,
"createdAt": "2018-11-13T04:28:17.000Z",
"updatedAt": "2018-11-13T04:28:17.000Z"
}
]
},
{
"id": 69,
"proffesional_photo": "",
"top_image": "https://sampleimage2.jpg",
"ratings": "1",
"price": 700,
"description": null,
"type": true,
"promo": 0,
"status": true,
"item": {
"Item_name": "Latte"
},
"restaurant_dish_menus": [
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 3,
"createdAt": "2018-11-13T04:28:17.000Z",
"updatedAt": "2018-11-13T04:28:17.000Z"
}
]
}
],
當用戶選擇某個菜單時,需要對其進行過濾,
每個餐具對象可能具有多個menu_id,
我嘗試使用array.filter
但是我在弄清楚如何從Dish array
通過子數組進行過濾時遇到了麻煩。
我嘗試的代碼( filterBy = 4
)
let result = data.filter(function(row) {
row.restaurant_dish_menus.filter(function(i) {
return i.menu_id == filterBy;
});
});
console.log(result)
給了我一個空數組。
如果filterBy is = 4
則預期輸出為
{
"id": 68,
"proffesional_photo": "",
"top_image": "https://sampleimage.jpg",
"ratings": "1",
"price": 690,
"description": null,
"type": true,
"promo": 0,
"status": true,
"item": {
"Item_name": "Dark Chocolate Latte"
},
"restaurant_dish_menus": [
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 4,
"createdAt": "2018-11-13T04:28:17.000Z",
"updatedAt": "2018-11-13T04:28:17.000Z"
},
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 3,
"createdAt": "2018-11-13T04:28:17.000Z",
"updatedAt": "2018-11-13T04:28:17.000Z"
}
]
}
如果filterBy
為3,則兩個對象都應該是輸出
這個怎么樣
var data = [{
"id": 68,
"proffesional_photo": "",
"top_image": "https://sampleimage.jpg",
"ratings": "1",
"price": 690,
"description": null,
"type": true,
"promo": 0,
"status": true,
"item": {
"Item_name": "Dark Chocolate Latte"
},
"restaurant_dish_menus": [
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 4,
"createdAt": "2018-11-13T04:28:17.000Z",
"updatedAt": "2018-11-13T04:28:17.000Z"
},
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 3,
"createdAt": "2018-11-13T04:28:17.000Z",
"updatedAt": "2018-11-13T04:28:17.000Z"
}
]
}];
var result = data.filter(function(m) {
return m.restaurant_dish_menus.some(function(d) {
return d.menu_id === 4;
});
})
.filter
期望傳遞的函數返回布爾值。 在您的情況下,該函數不返回任何內容(或undefined
),這總是錯誤的。
一種選擇是在嵌套過濾器中使用.find
,並根據結果是否為undefined
返回一個布爾值。
這是一個片段。
let data = [{ "id": 68, "proffesional_photo": "", "top_image": "https://sampleimage.jpg", "ratings": "1", "price": 690, "description": null, "type": true, "promo": 0, "status": true, "item": { "Item_name": "Dark Chocolate Latte" }, "restaurant_dish_menus": [{ "id": 1, "res_dish_id": 1318, "menu_id": 4, "createdAt": "2018-11-13T04:28:17.000Z", "updatedAt": "2018-11-13T04:28:17.000Z" }, { "id": 1, "res_dish_id": 1318, "menu_id": 3, "createdAt": "2018-11-13T04:28:17.000Z", "updatedAt": "2018-11-13T04:28:17.000Z" } ] }, { "id": 69, "proffesional_photo": "", "top_image": "https://sampleimage.jpg", "ratings": "1", "price": 690, "description": null, "type": true, "promo": 0, "status": true, "item": { "Item_name": "Dark Chocolate Latte" }, "restaurant_dish_menus": [{ "id": 1, "res_dish_id": 1318, "menu_id": 6, "createdAt": "2018-11-13T04:28:17.000Z", "updatedAt": "2018-11-13T04:28:17.000Z" }, { "id": 1, "res_dish_id": 1318, "menu_id": 5, "createdAt": "2018-11-13T04:28:17.000Z", "updatedAt": "2018-11-13T04:28:17.000Z" } ] }, ] let filterBy = 4; let result = data.filter(function(row) { return row.restaurant_dish_menus.find(function(i) { return i.menu_id == filterBy; }) !== undefined; }); console.log(result);
您可以如下使用“過濾器”
var data = [{ "id": 68, "proffesional_photo": "", "top_image": "https://sampleimage.jpg", "ratings": "1", "price": 690, "description": null, "type": true, "promo": 0, "status": true, "item": { "Item_name": "Dark Chocolate Latte" }, "restaurant_dish_menus": [ { "id": 1, "res_dish_id": 1318, "menu_id": 4, "createdAt": "2018-11-13T04:28:17.000Z", "updatedAt": "2018-11-13T04:28:17.000Z" }, { "id": 1, "res_dish_id": 1318, "menu_id": 3, "createdAt": "2018-11-13T04:28:17.000Z", "updatedAt": "2018-11-13T04:28:17.000Z" } ] }, { "id": 69, "proffesional_photo": "", "top_image": "https://sampleimage2.jpg", "ratings": "1", "price": 700, "description": null, "type": true, "promo": 0, "status": true, "item": { "Item_name": "Latte" }, "restaurant_dish_menus": [ { "id": 1, "res_dish_id": 1318, "menu_id": 3, "createdAt": "2018-11-13T04:28:17.000Z", "updatedAt": "2018-11-13T04:28:17.000Z" } ] } ] function filterBy(f) { return data.filter(d => d.restaurant_dish_menus.some(({ menu_id }) => menu_id == f)) } console.log(filterBy(4)) console.log(filterBy(3))
您也可以使用grep函數
var menus= {
"id": 68,
"proffesional_photo": "",
"top_image": "https://sampleimage.jpg",
"ratings": "1",
"price": 690,
"description": null,
"type": true,
"promo": 0,
"status": true,
"item": {
"Item_name": "Dark Chocolate Latte"
},
"restaurant_dish_menus": [
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 4,
"createdAt": "2018-11-13T04:28:17.000Z",
"updatedAt": "2018-11-13T04:28:17.000Z"
},
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 3,
"createdAt": "2018-11-13T04:28:17.000Z",
"updatedAt": "2018-11-13T04:28:17.000Z"
}
]
};
var found_names = $.grep(menus.restaurant_dish_menus, function(v) {
return v.menu_id ===4;
});
console.log(found_names);
您的問題尚不清楚最終目標,但如果您要過濾頂級對象,即,當且僅當它具有menu_id === filterBy
菜時,才必須存在頂級對象,則:
let result = data.filter(row => {
return row.restaurant_dish_menus.some(({menu_id}) => menu_id === filterBy);
});
如果restaurant_dish_menus
menu_id === filterBy
項為menu_id === filterBy
則以上內容僅過濾您的行。 但是這類對象的restaurant_dish_menus
仍未過濾。
結果:
[{
"id": 68,
// skipped
"item": {
"Item_name": "Dark Chocolate Latte"
},
"restaurant_dish_menus": [
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 4,
// skipped
},
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 3,
// skipped
}
]
}]
但是,如果您要過濾頂級商品並同時過濾restaurant_dish_menus
,即修改頂層對象,則:
let result = data.filter(row => {
return row.restaurant_dish_menus.some(({menu_id}) => menu_id === filterBy);
}).map(row => {
return {...row, restaurant_dish_menus: row.restaurant_dish_menus.filter(i => i.menu_id === filterBy)};
});
這將首先過濾具有menu_id === filterBy
的行對象,然后再過濾restaurant_dish_menus
,使其僅包含一次menu_id === filterBy
,從而有效地修改行對象,即map
。
結果:
[{
"id": 68,
// skipped
"item": {
"Item_name": "Dark Chocolate Latte"
},
"restaurant_dish_menus": [
{
"id": 1,
"res_dish_id": 1318,
"menu_id": 4,
// skipped
}
]
}]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.