Filter an array of objects based on another [TS/JS]

Question

I have two dropdowns - where each dropdown should filter an objects key. The dropdowns should not exclude each other, or both values from dropdown should work indenpentedly from each other (ie both dropdown values does not need to be true for filtering).

When I select an item from the dropdown, I get one array with two objects, for each dropdown:

[
    {
        "name": "Type",
        "value": [
            "calibration"
        ],
        "selected": [
            {
                "text": "calibration"
            }
        ]
    },
    {
        "name": "Function group",
        "value": [
            "1 - Test",
            "2 - Programming"
        ],
        "selected": [
            {
                "text": "1 - Test"
            }
        ]
    }
]

Above shows two objects, for the two different dropdowns - one with name "type" and one with "Function group".

The "value" in the object above is all of the dropdown items. "selected" holds the selected item from the dropdown and the filtering should be based on that.In this case we have selected "calibration" and "Test".

The "type" dropdown should filter on the data "category" field while the "function group" should filter on "groupDescription" field. The data that needs to be filtered based on the mentioned keyes and selected values looks like this:

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
      }
    ]

Playground with mock data and response example from dropdown here .

How to filter the data based on the values from the dropdown objects, for each key its responsible for?

Answer 1

It's not the prettiest code, but it does work. The one thing that you'd want to watch out for is the regex. It would be better to not have to parse and do a straight match like category, but if your cases are static then you should be able to figure out if this will work every time. It would also be nice to have a field key in filterDetails so you know which field to try to match in the actual data and you could program that in.

 const filterDetails = [ { name: "Type", value: ["calibration"], selected: [ { text: "calibration", }, ], }, { name: "Function group", value: ["1 - Test", "2 - Programming"], selected: [ { text: "Test", }, ], }, ]; const mockData = [ { operationDetails: { id: "5119-03-03-05", number: "41126-3", description: "Clutch wear, check. VCADS Pro operation", category: "calibration", //type languageCode: "en", countryCode: "GB", }, functionDetails: { groupId: 411, groupDescription: "Test", //function group 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 languageCode: "en", countryCode: "GB", }, functionDetails: { groupId: 411, groupDescription: "Programming", //function group languageCode: "", countryCode: "", }, lastPerformed: "2020-01-22", time: 20, isFavorite: false, }, ]; console.log( "filtered mockData: ", mockData.filter(({ operationDetails, functionDetails }) => { let groupDescriptionMatch = false; let categoryMatch = false; for (const details of filterDetails) { if ( details.name === "Type" && details.selected[0].text === operationDetails.category ) categoryMatch = true; if (details.name === "Function group") { let parsedGroup = details.selected[0].text.match(/[a-zA-Z]+/g); if (parsedGroup[0] === functionDetails.groupDescription) { groupDescriptionMatch = true; } } } return groupDescriptionMatch && categoryMatch; }) );