Help me to remove duplicates from my drop down list

Hi all,

First of all, Let me link the site page that I am currently working [on.](on.

www.rapidceylon.com/insertdelivery

In)

[www.rapidceylon.com/insertdelivery](on.

www.rapidceylon.com/insertdelivery

In)

This page is where anyone can insert a post. I have used 4 dropdown lists to select the country, province, district and the city. Later I am planning to use these values as a filter.

Anyhow, I have tried the code below to remove the duplicates from the dropdown lists. But, it is not working. If you view the site, you will clearly see it.

import wixLocation from 'wixlocation';
import wixData from 'wix-data';

$w.onReady(function () {
    uniqueDropDown1();
});

function uniqueDropDown1 (){
    wixData.query("maps")
        .limit(1000)
      .find()
      .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#dropdown1").options = buildOptions(uniqueTitles);
      });

 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.country);
 return [...new Set(titlesOnly)];
    }

 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}

export function dropdown1_change(event, $w) {
uniqueDropDown2();
$w("#dropdown2").enable();
}

function uniqueDropDown2 (){
    wixData.query("maps")
        .contains("country", $w("#dropdown1").value)
        .limit(1000)
      .find()
      .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#dropdown2").options = buildOptions(uniqueTitles);
      });

 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.province);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}

export function dropdown2_change(event, $w) {
uniqueDropDown3();
$w("#dropdown3").enable();  //Add your code for this event here: 
}

function uniqueDropDown3 (){
    wixData.query("maps")
        .contains("province", $w("#dropdown2").value)
        .limit(1000)
      .find()
      .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#dropdown3").options = buildOptions(uniqueTitles);
      });

 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.city);
 return [...new Set(titlesOnly)];
    }

 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}

Could someone please help me with solving this issue. Thanks In Advance.

Antru,

Have you seen the fairly recent addition to the API, the distinct() function?

See an example:
https://www.wix.com/corvid/forum/tips-tutorials-examples/example-remove-duplicates-from-connected-dropdown-options-using-distinct-query

I am not aware about it. Thank you so much. I will go through it and keep you updated.

Thank You J.D. I am following the example. I will go through and let you know about the progress.