Populating Dropdown with available slots

Ask the community
, ,
1

When a user enters the number in a group. I want to populated a dropdown with available slots. The following code is on the on change event;

async function populateSlots(s) {
    
    console.log("service id = " + s);
    $w('#activitydate').options = [];
    let slotList = [];
    let startRange = new Date("July 01, 2022 09:00:00");
    let endRange = new Date("July 30, 2022 09:00:00");

    let options = {
        startDateTime: startRange,
        endDateTime: endRange
    };

    
    wixBookings.getServiceAvailability(s, options)
        .then((a) => {
            console.log(JSON.stringify(a));
            a.slots.forEach(slot => {
                console.log(slot.remainingSpots +"/"+$w('#groupNo').value );
                if (slot.remainingSpots >= Number($w('#groupNo').value)){
                        let h = slot.startDateTime.getHours();
                        let l = slot.startDateTime.toLocaleDateString();
                        if ( h < 12) { l = l + " Morning Session"}
                        else {l = l + " Afternoon Session"};

                        let oneItem =   {       "label": l,
                                                "value": slot._id
                        };

                        slotList.push(oneItem); 
                }
            }); 
            $w('#activitydate').show();
            console.log(JSON.stringify(slotList));
            $w('#activitydate').options = slotList;
            console.log("options" +JSON.stringify($w('#activitydate').options));
        });

}

The array “slotList” is populated but the dropdown options are null. See output

1897×332 41.1 KB

Can anybody help me?

Thanks

Mary

2

I have got around this now. The id of the returned Item getServicesAvailability was very long. I have put them in an array and store the index in the dropdown. It now loads the options.

3

Do you have the code?