I have an array of objects arr1 which has a property widgetId which i am interested in. my intention is to filter arr1 based on ids which are not present in arr2. my arrays are as follows
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]
i should get a array which doesn’t have elements in arr2 ie the widgetId in arr1 and it should add a property selected:false in each object in arr1 which doesn’t include arr2 values as widgetId.
i have tried the code below
const filterByIdArray = (arr2, arr1) =>
arr1.filter(item =>
arr2.find(i =>
i !== item.widgetId));
but it doesn’t seems to give me the desired result .what can be done to implement this?
3
Answers
findwill return the first element in arr2 which !== item.widgetId, its not a boolean, so the filter won’t do anything.Try
includes.Set
selectedbyelement["selected"] = false;and push it to new array.You can use negation of
includesandmapwith spread operator to setseletedproperty to falsea way to do that..