I am faced with a scenario where I have two dropdowns, each designed to filter specific keys of an object. The key feature here is that the dropdown selections should not depend on each other; in other words, filtering can occur independently based on the values chosen from either dropdown.
https://i.sstatic.net/w0y7j.png
Upon selecting an option from a dropdown, I receive an array containing two objects corresponding to each dropdown:
[
{
"name": "Type",
"value": [
"calibration"
],
"selected": [
{
"text": "calibration"
}
]
},
{
"name": "Function group",
"value": [
"1 - Test",
"2 - Programming"
],
"selected": [
{
"text": "1 - Test"
}
]
}
]
The above displays two distinct objects, one for each dropdown - "Type" and "Function group".
In these objects, the "value" represents all options available in the corresponding dropdowns while the "selected" field holds the chosen item driving the filtering process. In this case, we have opted for "calibration" and "Test".
The "Type" dropdown filters based on the data's "category" field, whereas the "Function group" dropdown operates on the "groupDescription" field. The dataset targeted for filtering using these specified keys and selected values appears as follows:
const mockData = [
{
operationDetails: {
id: '5119-03-03-05',
number: '41126-3',
description: 'Clutch wear, check. VCADS Pro operation',
category: 'calibration', //type dropdown
languageCode: 'en',
countryCode: 'GB'
},
functionDetails: {
groupId: 411,
groupDescription: 'Test', //function group dropdown
languageCode: '',
countryCode: ''
},
lastPerformed: '2021-02-22',
time: 20,
isFavorite: false
}
,
{
operationDetails: {
id: '5229-03-03-05',
number: '41126-3',
description: 'Defective brake pad',
category: 'calibration', ///type dropdown
languageCode: 'en',
countryCode: 'GB'
},
functionDetails: {
groupId: 411,
groupDescription: 'Programming', //function group dropdown
languageCode: '',
countryCode: ''
},
lastPerformed: '2020-01-22',
time: 20,
isFavorite: false
}
]
Access the playground with mock data and sample response from dropdown here.
What approach should be taken to effectively filter the data based on the values provided by the dropdown objects and their respective keys?