Remove duplicates from multiple connected dropdown options

Discussion Ask a question
,
1

I followed Jeff’s tutorial here https://www.wix.com/code/home/forum/advanced-tips-tricks/remove-duplicates-from-connected-dropdown-options

It works great but the only problem for me is I have an additional drop down list on the same page that needs duplicates filtered out. I can’t seem to get the syntax quite right. Not a big javascript guy. Does anyone know how to do this properly? Also if there is a way to alphabetize the lists that would help as well.

2

Hi,
Feel free to paste your code here to consult.
Roi

3

import wixData from ‘wix-data’;

$w.onReady(function () {
// Run a query that returns all the items in the collection
wixData.query(“CQDB1”)
// Get the max possible results from the query
.limit(1000)
.find()
.then(results => {
// Call the function that creates a list of unique titles
const uniqueTitles = getUniqueTitles(results.items);
// Call the function that builds the options list from the unique titles
$w(“#dropdown2”).options = buildOptions(uniqueTitles);
});
// Builds an array from the “Title” field only from each item in
// the collection and then removes the duplicates
function getUniqueTitles(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const titlesOnly = items.map(item => item.model_make_id);
// Return an array with a list of unique titles
return […new Set(titlesOnly)];

} 
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles 
function buildOptions(uniqueList) { 
	return uniqueList.map(curr => { 
		// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle} 
		
		return {label:curr, value:curr};   
	}); 
}

});

export function dataset3_ready() {

// Run a query that returns all the items in the collection 
wixData.query("CQDB1") 
	// Get the max possible results from the query 
	.limit(1000)        
	.find() 
	.then(results => { 
		// Call the function that creates a list of unique titles 
	  	const uniqueTitles = getUniqueTitles(results.items);  
		// Call the function that builds the options list from the unique titles 
	  	$w("#dropdown3").options = buildOptions(uniqueTitles); 
	}); 
// Builds an array from the "Title" field only from each item in  
// the collection and then removes the duplicates 
function getUniqueTitles(items) {     
	// Use the map method to create the titlesOnly object containing all the titles from the query results 
		const titlesOnly = items.map(item => item.model_name);   
	// Return an array with a list of unique titles 
   		return [...new Set(titlesOnly)]; 
   		
} 
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles 
function buildOptions(uniqueList) { 
	return uniqueList.map(curr => { 
		// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle} 
		
		return {label:curr, value:curr};   
	}); 
}

}

4

Hi,
Check out this thread for sorting an array.
At what point dataset3_ready function triggered ?
Roi

5

They are dropdowns completed sequentially. The function needs to be completed only when the user clicks the drop down menu so that there are no duplicates in any of the dropdown menus. I’m trying to do exactly what was shown in the tutorial just with one additional dropdown filtered in the same way.

6

Hi,
Can you please share a link to your site so we can inspect ?
Roi.