Clearing duplicates from Dropbox and update repeater with results (in alphabetical order)

Dear Experts, I managed to follow example https://stcroppe.wixsite.com/steveonsoftware/example-code/wix-dataset-filtering-multiple-columns to clear multiples inside dropdown, I am not a coder so i followed example exactly as it is and achieved desirable results. The problem is that i need to sort (inside) dropdown boxes results in ALPHABETICAL order. I just cant put my head around - where to add trigger .sort() and .ascending() to? Please help. Sincerely, Paul

import wixData from ‘wix-data’;

import wixWindow from ‘wix-window’;
$w.onReady(function () {
});

// Javascript Class to manage dropdown data filtering
// When an object created from this class is given a dataset with the fields ‘county’, ‘town’, ‘brand’, ‘title’ and ‘evcar’
// The object will generate unique column lists formatted to be passed directly to a $w.DropDown.options property.

class dropDownData {
constructor(recordList = ) {
this.updateRecordList(recordList);
}

// Call this function to initialise the object data set and reset the column lists.
updateRecordList(recordList) {
this.list = recordList;
this.resetFieldLists();
}

resetFieldLists() {
this.countys = ;
this.towns = ;
this.brands = ;
this.titles = ;
this.evcars = ;
}

// Returns a unique list based on the values in the countys column
// The list contains objects with key value pairs for the keys ‘label’ and ‘value’
countysList() {
if (this.countys.length === 0) {
// We haven’t initialised countyList yet yet so set it up
this.countys = this.uniqueColumnListForField(‘county’);
}
return this.countys;
}

// Returns a unique list based on the values in the town column
// The list contains objects with key value pairs for the keys ‘label’ and ‘value’
townsList() {
if (this.towns.length === 0) {
// We haven’t initialised townList yet yet so set it up
this.towns = this.uniqueColumnListForField(‘town’);
}
return this.towns;
}

// Returns a unique list based on the values in the brand column
// The list contains objects with key value pairs for the keys ‘label’ and ‘value’
brandsList() {
if (this.brands.length === 0) {
// We haven’t initialised brandList yet so set it up
this.brands = this.uniqueColumnListForField(‘brand’);
}
return this.brands;
}

titlesList() {
if (this.titles.length === 0) {
// We haven’t initialised titleList yet so set it up
this.titles = this.uniqueColumnListForField(‘title’);
}
return this.titles;
}

evcarsList() { 

if (this.evcars.length === 0) {
// We haven’t initialised evcarList yet so set it up
this.evcars = this.uniqueColumnListForField(‘evcar’);
}
return this.evcars;
}

// Helper method for extracting column records and making them unique
// All list methods use this to generate list containing objects with
// key value pairs for the keys ‘label’ and ‘value’ which is expected
//by the $w.DropDown.options property

uniqueColumnListForField(field) { 

let result = ;
let uniqueValues = ; // Used to ensure values in the list are unique
this.list.forEach(item => {
let fieldValue = item[field];
// Only store field values that we haven’t yet seen. Skip null values
if (fieldValue && !uniqueValues.includes(fieldValue)) {
uniqueValues.push(fieldValue); // Remember this value to maintain uniqueness
// Save the resulting information in the format required by the DropDown options list.
result.push({‘label’:fieldValue, ‘value’:fieldValue});
}
});
return result;
}
}

let dropDownRecords = new dropDownData();

$w.onReady(function () {
//We initialise the drop downs here once the data we need is available.
$w(‘#dataset1’).onReady(() => {
updateDropDownOptions();
});
});

// We update the drop down lists from the currently filtered dataset.
// The data set is filtered by values from the drop down lists

function updateDropDownOptions() {
// Use getItems to load all items available from the filtered dataset
// When we apply a filter (see updateRepeaterFilter()) this gets called to reload the drop downs
$w(‘#dataset1’).getItems(0,$w(‘#dataset1’).getTotalCount())
.then((results) => {
// Update our dropdown object with the new data record list
dropDownRecords.updateRecordList(results.items);
// Load/Reload dropdown data sets from our dropdown list data object
$w(‘#countyList’).options = dropDownRecords.countysList();
$w(‘#townList’).options = dropDownRecords.townsList();
$w(‘#brandList’).options = dropDownRecords.brandsList();
$w(‘#titleList’).options = dropDownRecords.titlesList();
});
}

// Function to filter dataset based upon the filter drop down values
function updateRepeaterFilter() {
// Empty filter will remove existing filters so if none of the dropdowns have values all
// Table records will be available to the repeater.
let repeaterFilter = wixData.filter();
// If we have any filter values we simply join them together using .eq()
if ($w(‘#countyList’).value) {
repeaterFilter = repeaterFilter.eq(‘county’, $w(‘#countyList’).value);
}
if ($w(‘#townList’).value) {
repeaterFilter = repeaterFilter.eq(‘town’, $w(‘#townList’).value);
}
if ($w(‘#brandList’).value) {
repeaterFilter = repeaterFilter.eq(‘brand’, $w(‘#brandList’).value);
}
if ($w(‘#titleList’).value) {
repeaterFilter = repeaterFilter.eq(‘title’, $w(‘#titleList’).value);
}

// Update the filter on the dataset
$w(‘#dataset1’).setFilter(repeaterFilter)
.then(() => {
// When we get here the dataset will be filtered so we need to reset the drop downs from the
// newly filtered record list
updateDropDownOptions();
});
}

// Helper functions triggered when we make a filter list selection in a drop down

export function countyList_change(event) {
//Add your code for this event here:
updateRepeaterFilter();
$w(‘#townList’).enable();
}

export function townList_change(event) {
//Add your code for this event here:
updateRepeaterFilter();
$w(‘#brandList’).enable();
}

export function brandList_change(event) {
//Add your code for this event here:
updateRepeaterFilter();
$w(‘#titleList’).enable();
}

export function titleList_change(event) {
//Add your code for this event here:
updateRepeaterFilter();
$w(‘#input1’).show();
$w(‘#input2’).enable();
$w(‘#input3’).enable();
$w(‘#input4’).enable();
}

export function input4_change(event) {
$w(‘#radioMain’).enable();
}

// Because the filter for the repeater uses multiple fields and these result in restricting the dropdown
// Option lists we need to reset the drop down lists to undefined to get all of the options back and
// repopulate the repeater.
// We could have a reset option as a button next to each drop down or add a drop down option of reset but this
// works for the purposes of this example

export function resetButton_click(event, $w) {
// Reset the filter list undefined forces the dropdown placeholder text to be displayed.
$w(‘#textBox1’).value = undefined;
$w(“#textBox1”).resetValidityIndication();

$w('#countyList').selectedIndex = undefined; 
$w("#countyList").resetValidityIndication(); 

$w('#townList').selectedIndex = undefined; 
$w("#townList").resetValidityIndication(); 
$w('#townList').disable(); 

$w('#brandList').selectedIndex = undefined; 
$w("#brandList").resetValidityIndication(); 
$w('#brandList').disable(); 

$w('#titleList').selectedIndex = undefined; 
$w("#titleList").resetValidityIndication(); 
$w('#titleList').disable(); 

$w('#input1').value = undefined; 
$w('#input1').hide(); 

$w('#input2').disable(); 
$w('#input2').value = undefined; 
$w('#input2').resetValidityIndication(); 

$w('#input3').disable(); 
$w('#input3').value = undefined; 
$w('#input3').resetValidityIndication(); 

$w('#input4').disable(); 
$w('#input4').value = undefined; 
$w('#input4').resetValidityIndication(); 

$w('#radioMain').disable(); 
$w('#radioMain').value = undefined; 
$w('#radioMain').resetValidityIndication();  

$w('#radioInternal').disable(); 
$w('#radioInternal').value = undefined;  
$w('#radioInternal').resetValidityIndication();  

// With no drop down values selected the repeater filter will be cleared and all repeater items
// will be displayed
updateRepeaterFilter();
}

SOLVED

import wixData from 'wix-data';

import wixWindow from 'wix-window';

$w.onReady(function () {

});


// Javascript Class to manage dropdown data filtering

// When an object created from this class is given a dataset with the fields 'county', 'town', 'brand', 'title' and 'evcar'

// The object will generate unique column lists formatted to be passed directly to a $w.DropDown.options property.

class dropDownData {

    constructor(recordList = []) {

 this.updateRecordList(recordList);

    }

 

 // Call this function to initialise the object data set and reset the column lists.

    updateRecordList(recordList) {

 this.list = recordList;
 this.resetFieldLists();

    }

 

    resetFieldLists() {

 this.countys = [];

 this.towns = [];

 this.brands = [];

 this.titles = [];

 this.evcars = [];

    }

 

// Returns a unique list based on the values in the countys column

 // The list contains objects with key value pairs for the keys 'label' and 'value'

    countysList()
 
     {
 

 if (this.countys.length === 0) {

 // We haven't initialised countyList yet yet so set it up

 this.countys = this.uniqueColumnListForField('county');

        }

 return this.countys;

    }

 

 // Returns a unique list based on the values in the town column

 // The list contains objects with key value pairs for the keys 'label' and 'value'

    townsList() {

 if (this.towns.length === 0) {

 // We haven't initialised townList yet yet so set it up

 this.towns = this.uniqueColumnListForField('town');

        }

 return this.towns;

    }

 

 // Returns a unique list based on the values in the brand column

 // The list contains objects with key value pairs for the keys 'label' and 'value'

    brandsList() {

 if (this.brands.length === 0) {

 // We haven't initialised brandList yet so set it up

 this.brands = this.uniqueColumnListForField('brand');

        }

 return this.brands;

    } 

    titlesList() {

 if (this.titles.length === 0) {

 // We haven't initialised titleList yet so set it up

 this.titles = this.uniqueColumnListForField('title');

        }

 return this.titles;

    }

    evcarsList() {

 if (this.evcars.length === 0) {

 // We haven't initialised evcarList yet so set it up

 this.evcars = this.uniqueColumnListForField('evcar');

        }

 return this.evcars;

    }  

 // Helper method for extracting column records and making them unique

 // All list methods use this to generate list containing objects with

 // key value pairs for the keys 'label' and 'value' which is expected

 //by the $w.DropDown.options property

    uniqueColumnListForField(field) {

 let result = [];

 let uniqueValues = []; // Used to ensure values in the list are unique

 this.list.forEach(item => {

 let fieldValue = item[field];

 // Only store field values that we haven't yet seen. Skip null values

 if (fieldValue && !uniqueValues.includes(fieldValue)) {

                uniqueValues.push(fieldValue); // Remember this value to maintain uniqueness

 // Save the resulting information in the format required by the DropDown options list.

                result.push({'label':fieldValue, 'value':fieldValue});

 
            }

        });

 return result;

    }

}

 
let dropDownRecords = new dropDownData();

$w.onReady(function () {

 //We initialise the drop downs here once the data we need is available.

    $w('#dataset1').onReady(() => {

        updateDropDownOptions();


    });

});

 

// We update the drop down lists from the currently filtered dataset.

// The data set is filtered by values from the drop down lists

function updateDropDownOptions() {
 // Use getItems to load all items available from the filtered dataset
 // When we apply a filter (see updateRepeaterFilter()) this gets called to reload the drop downs
    $w('#dataset1').getItems(0, $w('#dataset1').getTotalCount())
        .then((results) => {
 // Update our dropdown object with the new data record list
            dropDownRecords.updateRecordList(results.items);
 // Load/Reload dropdown data sets from our dropdown list data object
        $w("#dataset1").onReady( () => {  

 let countyListoptions = dropDownRecords.countysList();
 let options = countyListoptions;
                    options.sort(function(a, b) {
 let labelA = a.label.toUpperCase(); 
 let labelB = b.label.toUpperCase();
 if (labelA < labelB) {
 return -1;
                        }
 if (labelA > labelB) {
 return 1;
                        }
 return 0;
                        });
            $w("#countyList").options = options;

 let townListoptions = dropDownRecords.townsList();
 let options1 = townListoptions;
                    options1.sort(function(a, b) {
 let labelA = a.label.toUpperCase(); 
 let labelB = b.label.toUpperCase();
 if (labelA < labelB) {
 return -1;
                        }
 if (labelA > labelB) {
 return 1;
                        }
 return 0;
                        });
            $w("#townList").options = options1;

 let brandListoptions = dropDownRecords.brandsList();
 let options2 = brandListoptions;
                    options2.sort(function(a, b) {
 let labelA = a.label.toUpperCase(); 
 let labelB = b.label.toUpperCase();
 if (labelA < labelB) {
 return -1;
                        }
 if (labelA > labelB) {
 return 1;
                        }
 return 0;
                        });
            $w("#brandList").options = options2;

 let titleListoptions = dropDownRecords.titlesList();
 let options3 = titleListoptions;
                    options3.sort(function(a, b) {
 let labelA = a.label.toUpperCase(); 
 let labelB = b.label.toUpperCase();
 if (labelA < labelB) {
 return -1;
                        }
 if (labelA > labelB) {
 return 1;
                        }
 return 0;
                        });
            $w("#titleList").options = options3;
        })

        });
}



// Function to filter dataset based upon the filter drop down values

function updateRepeaterFilter() {

 
 // Empty filter will remove existing filters so if none of the dropdowns have values all

 // Table records will be available to the repeater.

 let repeaterFilter = wixData.filter();

 // If we have any filter values we simply join them together using .eq()
 

 if ($w('#countyList').value) {

        repeaterFilter = repeaterFilter.eq('county', $w('#countyList').value);

    }

 if ($w('#townList').value) {

        repeaterFilter = repeaterFilter.eq('town', $w('#townList').value);

    }

 if ($w('#brandList').value) {

        repeaterFilter = repeaterFilter.eq('brand', $w('#brandList').value);

    }

 if ($w('#titleList').value) {

        repeaterFilter = repeaterFilter.eq('title', $w('#titleList').value);

    }




 // Update the filter on the dataset

    $w('#dataset1').setFilter(repeaterFilter)

    .then(() => {

 // When we get here the dataset will be filtered so we need to reset the drop downs from the

 // newly filtered record list

        updateDropDownOptions();

    });

}

 

// Helper functions triggered when we make a filter list selection in a drop down

export function countyList_change(event) {

 //Add your code for this event here:

    updateRepeaterFilter();
    $w('#townList').enable();

}

 

export function townList_change(event) {

 //Add your code for this event here:

    updateRepeaterFilter();
    $w('#brandList').enable();

}

export function brandList_change(event) {

 //Add your code for this event here:

    updateRepeaterFilter();
    $w('#titleList').enable();

}

export function titleList_change(event) {

 //Add your code for this event here:

    updateRepeaterFilter();
    $w('#input1').show();

    $w('#input2').enable();
    $w('#input3').enable();
    $w('#input4').enable();
 

}

export function input4_change(event) {
    $w('#radioMain').enable();

}
 

// Because the filter for the repeater uses multiple fields and these result in restricting the dropdown

// Option lists we need to reset the drop down lists to undefined to get all of the options back and

// repopulate the repeater.

// We could have a reset option as a button next to each drop down or add a drop down option of reset but this

// works for the purposes of this example

export function resetButton_click(event, $w) {

 // Reset the filter list undefined forces the dropdown placeholder text to be displayed.

    $w('#textBox1').value = undefined;
    $w("#textBox1").resetValidityIndication();

    $w('#countyList').selectedIndex = undefined;
    $w("#countyList").resetValidityIndication();

    $w('#townList').selectedIndex = undefined;
    $w("#townList").resetValidityIndication();
    $w('#townList').disable();

    $w('#brandList').selectedIndex = undefined;
    $w("#brandList").resetValidityIndication();
    $w('#brandList').disable();

    $w('#titleList').selectedIndex = undefined;
    $w("#titleList").resetValidityIndication();
    $w('#titleList').disable();

    $w('#input1').value = undefined;
    $w('#input1').hide();
 
    $w('#input2').disable();
    $w('#input2').value = undefined;
    $w('#input2').resetValidityIndication();

    $w('#input3').disable();
    $w('#input3').value = undefined;
    $w('#input3').resetValidityIndication();

    $w('#input4').disable();
    $w('#input4').value = undefined;
    $w('#input4').resetValidityIndication();

    $w('#radioMain').disable();
    $w('#radioMain').value = undefined;
    $w('#radioMain').resetValidityIndication(); 

    $w('#radioInternal').disable();
    $w('#radioInternal').value = undefined; 
    $w('#radioInternal').resetValidityIndication(); 

 // With no drop down values selected the repeater filter will be cleared and all repeater items

 // will be displayed

    updateRepeaterFilter();

}