Hello Guys, Is it possible to eliminate / filter options in a dropdown comparing another dropdown?

Ask the community
,
7

@jonatandor35 You are totally right about that, it was a wrong assumption of mine, and it worked just fine because dataset A loads quicker than dataset B in the example. So, to correct the code I create two alternatives, one that we write lessc code, but it runs the filter two times (no problem if the data is small). And another more functional, that we write more code, but it is more efficient.

Version 1:

//Function that filters repeated items from dropdowns
const filterDropdown = (list, listToFilter) => {
    return listToFilter.filter(
        ({ label }) => !list.some(item => item.label === label)
    )
}

$w.onReady(async () => {
    //Wait for the dataset A and B to be ready
    $w('#datasetA, #datasetB').onReady(() => {
        //Get the dropdown values
        const dd1 = $w('#dropdown1').options
        const dd2 = $w('#dropdown2').options
        //Filter the values
        const filteredDD = filterDropdown(dd1, dd2)
        //Feed them to the dropdown that needs filter
        $w('#dropdown2').options = filteredDD
    })
    //Wait for the dataset B to be ready
})

Version 2:

let datasetA = false
let datasetB = false

//Function that filters repeated items from dropdowns
const filterDropdown = (list, listToFilter) => {
    return listToFilter.filter(
        ({ label }) => !list.some(item => item.label === label)
    )
}

const loadDropdowns = () => {
    const dd1 = $w('#dropdown1').options
    const dd2 = $w('#dropdown2').options
    //Filter the values
    const filteredDD = filterDropdown(dd1, dd2)
    //Feed them to the dropdown that needs filter
    $w('#dropdown2').options = filteredDD
}

const checkLoad = () => {
    if (datasetA && datasetB) loadDropdowns()
}

$w.onReady(async () => {
    //Wait for the dataset A and B to be ready
    $w('#datasetA').onReady(() => {
        datasetA = true
        checkLoad()
    })
    $w('#datasetB').onReady(() => {
        datasetB = true
        checkLoad()
    })
})

Thanks for the tip @J. D.!