我有一个对象数组arr1有一个属性widgetId，我感兴趣的。我的目的是根据arr2中不存在的id来过滤arr1。我的数组如下
arr1= [
{
"widgetId": 2,
"widgetKey": "totalSales_card_cash",
"widgetName": "Total Sales Birfurcated Card & Cash",
"title": "Sales Report",
"type": "chart",
"chartType": "pie",
"filters": {
"sortBy": "lastYear",
"appliedFilters": {
"startDate": "2022-01-01T00:00:00.000+00:00",
"endDate": "2022-12-31T23:59:59.999+00:00"
}
},
"showDefault": false,
"isLive": true
},
{
"widgetId": 3,
"widgetKey": "totalSales_perishablesNonPerisablesHotMeals",
"widgetName": "Total Sales Birfurcated perishables/non-perishables/hot meals and beverage",
"title": "Sales Report",
"type": "chart",
"chartType": "pie",
"displayType": "oneColumn",
"filters": {
"sortBy": "lastYear",
"appliedFilters": {
"startDate": "2022-01-01T00:00:00.000+00:00",
"endDate": "2022-12-31T23:59:59.999+00:00"
}
},
"showDefault": false,
"isLive": true
},
{
"widgetId": 5,
"widgetKey": "totalSales_dayWise",
"widgetName": "Day wise bar chart",
"title": "Total Sales: DayWise",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"endDate": "2021-11-30T00:00:00+05:30",
"startDate": "2021-10-01T00:00:00+05:30",
"sortBy": "betweenDates",
"appliedFilters": {
"endDate": "2021-11-29T18:30:00.000+00:00",
"startDate": "2021-09-30T18:30:00.000+00:00",
"sortBy": "betweenDates"
}
},
"showDefault": false,
"options": {
"scales": {
"x": {
"grid": {
"color": "#ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
}
}
},
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Total Sales: DayWise",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 6,
"widgetKey": "totalSales_monthWise",
"widgetName": "Month wise bar chart",
"title": "Total Sales: MonthWise",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"sortBy": "lastYear",
"appliedFilters": {
"sortBy": "lastYear",
"startDate": "2022-01-01T00:00:00.000+00:00",
"endDate": "2022-12-31T23:59:59.999+00:00"
}
},
"showDefault": true,
"options": {
"scales": {
"x": {
"grid": {
"color": "#ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
}
}
},
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Total Sales: MonthWise",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 7,
"widgetKey": "totalSales_currencyWise",
"widgetName": "Total Sales currency wise",
"title": "Total Sales currency wise",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"endDate": "2021-11-30T00:00:00+05:30",
"startDate": "2021-11-01T00:00:00+05:30",
"sortBy": "betweenDates",
"appliedFilters": {
"startDate": "2021-10-31T18:30:00.000+00:00",
"endDate": "2021-11-29T18:30:00.000+00:00"
}
},
"showDefault": false,
"options": {
"scales": {
"x": {
"grid": {
"color": "#ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
},
"ticks": {
"stepSize": 100000
}
}
},
"animation": false,
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Total Sales Currency Wise",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 8,
"widgetKey": "totalSales_baseWise",
"widgetName": "Total Sales: BaseWise",
"title": "Total Sales: BaseWise",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"endDate": "2022-11-30T00:00:00+05:30",
"startDate": "2021-11-01T00:00:00+05:30",
"sortBy": "betweenDates",
"appliedFilters": {
"startDate": "2021-10-31T18:30:00.000+00:00",
"endDate": "2022-11-29T18:30:00.000+00:00"
}
},
"showDefault": true,
"options": {
"scales": {
"x": {
"grid": {
"color": "#ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
}
}
},
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Total Sales: BaseWise",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 9,
"widgetKey": "declinedCardAmount",
"widgetName": "Declined Card amount per day",
"title": "Declined Card amount per day",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"endDate": "2021-11-07T00:00:00+05:30",
"startDate": "2021-11-01T00:00:00+05:30",
"sortBy": "betweenDates",
"appliedFilters": {
"startDate": "2021-10-31T18:30:00.000+00:00",
"endDate": "2021-11-06T18:30:00.000+00:00"
}
},
"showDefault": false,
"options": {
"scales": {
"x": {
"beginAtZero": false,
"grid": {
"color": " #ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
}
}
},
"responsive": true,
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Declined Card Amount Per Day",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 11,
"widgetKey": "physicalQTY_productSale_warehouseWise",
"widgetName": "Physical quantity of products sale warehouse wise",
"title": "Sales Report",
"type": "listView",
"chartType": "",
"displayType": "twoColumns",
"filters": {
"warehouseId": "1",
"appliedFilters": {
"warehouseId": 1
}
},
"showDefault": false,
"isLive": true
},
{
"widgetId": 12,
"widgetKey": "orderSalesCurrentFinancialYear",
"widgetName": "Sales and orders of current financial year",
"title": "Sales and orders of current financial year",
"type": "card",
"chartType": "",
"displayType": "oneColumn",
"filters": {
"sortBy": "thisYear",
"appliedFilters": {}
},
"showDefault": false,
"isLive": true
},
{
"widgetId": 13,
"widgetKey": "currentMonthAvgSalesOrders",
"widgetName": "Current month average sales and orders",
"title": "Current month average sales and orders",
"type": "card",
"chartType": "",
"displayType": "oneColumn",
"filters": {
"sortBy": "thisMonth",
"appliedFilters": {}
},
"showDefault": true,
"isLive": true
},
{
"widgetId": 14,
"widgetKey": "mostDeclinedCardSectorsPerMonthWeek",
"widgetName": "Most declined card sectors per month/week",
"title": "cards sectors",
"type": "listView",
"chartType": "list",
"displayType": "twoColumns",
"filters": {
"sortBy": "thisWeek"
},
"showDefault": false
},
{
"widgetId": 17,
"widgetKey": "totalDeposit",
"widgetName": "Total deposit",
"title": "Deposits total",
"type": "listView",
"chartType": "list",
"displayType": "twoColumns",
"filters": {
"sortBy": "thisWeek"
},
"showDefault": false
},
{
"widgetId": 35,
"widgetKey": "avgWastage",
"widgetName": "Average Wastage for the financial year",
"title": "Average Wastage for the financial year",
"type": "chart",
"chartType": "line",
"displayType": "oneColumn",
"legends": [
{
"color": "#63ABFD",
"name": "Dataset 1"
},
{
"color": "#9B5A97",
"name": "Dataset 2"
}
],
"datasets": [
{
"backgroundColor": "#63ABFD",
"borderColor": "#63ABFD",
"data": [
4000,
2000,
1000,
2000,
1000,
4000,
1000,
2000,
1000,
1000,
2000,
3000
]
},
{
"backgroundColor": "#9B5A97",
"borderColor": "#9B5A97",
"data": [
1000,
3000,
2000,
1300,
1000,
2000,
2000,
3000,
1000,
2000,
3000,
2000,
8000,
1000
]
}
],
"filters": {
"sortBy": "thisWeek"
},
"showDefault": false,
"options": {
"plugins": {
"title": {
"display": false,
"text": "Total Sales Currency Wise"
},
"legend": {
"display": false
}
},
"animation": false,
"scales": {
"y": {
"ticks": {
"stepSize": 100000
},
"grid": {
"color": "#ffffff1f"
},
"beginAtZero": false
},
"x": {
"grid": {
"color": "#ffffff1f"
}
}
}
}
}
]
arr2=[6,24,8,9,14,11,17]
我应该得到一个数组没有元素在arr2即在arr1的widgetId，它应该添加一个属性selected:false在每个对象在arr1不包括arr2值作为widgetId。
我试过下面的代码
const filterByIdArray = (arr2, arr1) =>
arr1.filter(item =>
arr2.find(i =>
i !== item.widgetId));
，但它似乎没有给我想要的结果。可以做些什么来实现这个?
可以使用includes和map的反运算符将seleted属性设置为false
const arr1 = [
{
"widgetId": 2,
"widgetKey": "totalSales_card_cash",
"widgetName": "Total Sales Birfurcated Card & Cash",
"title": "Sales Report",
"type": "chart",
"chartType": "pie",
"filters": {
"sortBy": "lastYear",
"appliedFilters": {
"startDate": "2022-01-01T00:00:00.000+00:00",
"endDate": "2022-12-31T23:59:59.999+00:00"
}
},
"showDefault": false,
"isLive": true
},
{
"widgetId": 3,
"widgetKey": "totalSales_perishablesNonPerisablesHotMeals",
"widgetName": "Total Sales Birfurcated perishables/non-perishables/hot meals and beverage",
"title": "Sales Report",
"type": "chart",
"chartType": "pie",
"displayType": "oneColumn",
"filters": {
"sortBy": "lastYear",
"appliedFilters": {
"startDate": "2022-01-01T00:00:00.000+00:00",
"endDate": "2022-12-31T23:59:59.999+00:00"
}
},
"showDefault": false,
"isLive": true
},
{
"widgetId": 5,
"widgetKey": "totalSales_dayWise",
"widgetName": "Day wise bar chart",
"title": "Total Sales: DayWise",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"endDate": "2021-11-30T00:00:00+05:30",
"startDate": "2021-10-01T00:00:00+05:30",
"sortBy": "betweenDates",
"appliedFilters": {
"endDate": "2021-11-29T18:30:00.000+00:00",
"startDate": "2021-09-30T18:30:00.000+00:00",
"sortBy": "betweenDates"
}
},
"showDefault": false,
"options": {
"scales": {
"x": {
"grid": {
"color": "#ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
}
}
},
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Total Sales: DayWise",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 6,
"widgetKey": "totalSales_monthWise",
"widgetName": "Month wise bar chart",
"title": "Total Sales: MonthWise",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"sortBy": "lastYear",
"appliedFilters": {
"sortBy": "lastYear",
"startDate": "2022-01-01T00:00:00.000+00:00",
"endDate": "2022-12-31T23:59:59.999+00:00"
}
},
"showDefault": true,
"options": {
"scales": {
"x": {
"grid": {
"color": "#ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
}
}
},
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Total Sales: MonthWise",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 7,
"widgetKey": "totalSales_currencyWise",
"widgetName": "Total Sales currency wise",
"title": "Total Sales currency wise",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"endDate": "2021-11-30T00:00:00+05:30",
"startDate": "2021-11-01T00:00:00+05:30",
"sortBy": "betweenDates",
"appliedFilters": {
"startDate": "2021-10-31T18:30:00.000+00:00",
"endDate": "2021-11-29T18:30:00.000+00:00"
}
},
"showDefault": false,
"options": {
"scales": {
"x": {
"grid": {
"color": "#ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
},
"ticks": {
"stepSize": 100000
}
}
},
"animation": false,
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Total Sales Currency Wise",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 8,
"widgetKey": "totalSales_baseWise",
"widgetName": "Total Sales: BaseWise",
"title": "Total Sales: BaseWise",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"endDate": "2022-11-30T00:00:00+05:30",
"startDate": "2021-11-01T00:00:00+05:30",
"sortBy": "betweenDates",
"appliedFilters": {
"startDate": "2021-10-31T18:30:00.000+00:00",
"endDate": "2022-11-29T18:30:00.000+00:00"
}
},
"showDefault": true,
"options": {
"scales": {
"x": {
"grid": {
"color": "#ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
}
}
},
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Total Sales: BaseWise",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 9,
"widgetKey": "declinedCardAmount",
"widgetName": "Declined Card amount per day",
"title": "Declined Card amount per day",
"type": "chart",
"chartType": "bar",
"displayType": "oneColumn",
"filters": {
"endDate": "2021-11-07T00:00:00+05:30",
"startDate": "2021-11-01T00:00:00+05:30",
"sortBy": "betweenDates",
"appliedFilters": {
"startDate": "2021-10-31T18:30:00.000+00:00",
"endDate": "2021-11-06T18:30:00.000+00:00"
}
},
"showDefault": false,
"options": {
"scales": {
"x": {
"beginAtZero": false,
"grid": {
"color": " #ffffff1f"
}
},
"y": {
"beginAtZero": false,
"grid": {
"color": "#ffffff1f"
}
}
},
"responsive": true,
"plugins": {
"legend": {
"display": false
},
"title": {
"text": "Declined Card Amount Per Day",
"display": false
}
}
},
"isLive": true
},
{
"widgetId": 11,
"widgetKey": "physicalQTY_productSale_warehouseWise",
"widgetName": "Physical quantity of products sale warehouse wise",
"title": "Sales Report",
"type": "listView",
"chartType": "",
"displayType": "twoColumns",
"filters": {
"warehouseId": "1",
"appliedFilters": {
"warehouseId": 1
}
},
"showDefault": false,
"isLive": true
},
{
"widgetId": 12,
"widgetKey": "orderSalesCurrentFinancialYear",
"widgetName": "Sales and orders of current financial year",
"title": "Sales and orders of current financial year",
"type": "card",
"chartType": "",
"displayType": "oneColumn",
"filters": {
"sortBy": "thisYear",
"appliedFilters": {}
},
"showDefault": false,
"isLive": true
},
{
"widgetId": 13,
"widgetKey": "currentMonthAvgSalesOrders",
"widgetName": "Current month average sales and orders",
"title": "Current month average sales and orders",
"type": "card",
"chartType": "",
"displayType": "oneColumn",
"filters": {
"sortBy": "thisMonth",
"appliedFilters": {}
},
"showDefault": true,
"isLive": true
},
{
"widgetId": 14,
"widgetKey": "mostDeclinedCardSectorsPerMonthWeek",
"widgetName": "Most declined card sectors per month/week",
"title": "cards sectors",
"type": "listView",
"chartType": "list",
"displayType": "twoColumns",
"filters": {
"sortBy": "thisWeek"
},
"showDefault": false
},
{
"widgetId": 17,
"widgetKey": "totalDeposit",
"widgetName": "Total deposit",
"title": "Deposits total",
"type": "listView",
"chartType": "list",
"displayType": "twoColumns",
"filters": {
"sortBy": "thisWeek"
},
"showDefault": false
},
{
"widgetId": 35,
"widgetKey": "avgWastage",
"widgetName": "Average Wastage for the financial year",
"title": "Average Wastage for the financial year",
"type": "chart",
"chartType": "line",
"displayType": "oneColumn",
"legends": [
{
"color": "#63ABFD",
"name": "Dataset 1"
},
{
"color": "#9B5A97",
"name": "Dataset 2"
}
],
"datasets": [
{
"backgroundColor": "#63ABFD",
"borderColor": "#63ABFD",
"data": [
4000,
2000,
1000,
2000,
1000,
4000,
1000,
2000,
1000,
1000,
2000,
3000
]
},
{
"backgroundColor": "#9B5A97",
"borderColor": "#9B5A97",
"data": [
1000,
3000,
2000,
1300,
1000,
2000,
2000,
3000,
1000,
2000,
3000,
2000,
8000,
1000
]
}
],
"filters": {
"sortBy": "thisWeek"
},
"showDefault": false,
"options": {
"plugins": {
"title": {
"display": false,
"text": "Total Sales Currency Wise"
},
"legend": {
"display": false
}
},
"animation": false,
"scales": {
"y": {
"ticks": {
"stepSize": 100000
},
"grid": {
"color": "#ffffff1f"
},
"beginAtZero": false
},
"x": {
"grid": {
"color": "#ffffff1f"
}
}
}
}
}
]
const arr2=[6,24,8,9,14,11,17]
const filterByIdArray = (arr2, arr1) =>
arr1.filter(item => !arr2.includes(item.widgetId))
.map(item => ({ ...item, selected: false }));
const filteredArray = filterByIdArray(arr2, arr1);
console.log(filteredArray);find将返回arr2中第一个!== item的元素。widgetId，它不是布尔值，所以过滤器不会做任何事情。
试试includes.
const filterByIdArray = (arr2, arr1) => arr1.filter((item) => !arr2.includes(item.widgetId));
设置selected为element["selected"] = false;，并将其压入新数组
let res = [];
filterByIdArray(arr2, arr1).forEach((element) => {
element["selected"] = false;
res.push(element);
});
一种方法…
const filterByIdArray = (arr1,arr2) =>
{
let res = arr1.filter(({widgetId}) => !arr2.includes(widgetId));
res.forEach( elm => elm.selected = false );
return res;
}
// simplified testing
const arr1 =
[ { widgetId : 2, otherdata : '...' }
, { widgetId : 3 }
, { widgetId : 5 }
, { widgetId : 6 }
, { widgetId : 7 }
, { widgetId : 8 }
, { widgetId : 9 }
, { widgetId : 11 }
, { widgetId : 13 }
, { widgetId : 14 }
, { widgetId : 17 }
, { widgetId : 35 }
]
, arr2 = [ 6, 24, 8, 9, 14, 11, 17 ]
;
console.log( filterByIdArray(arr1,arr2) );
.as-console-wrapper {max-height: 100% !important;top: 0;}
.as-console-row::after {display: none !important;}