[Solved] Preventing duplicates in ion-select

Ionic Framework ionic-v3
1

Hi guys,

At the moment, I’m retrieving data from a database to get back a list of clothing types. The data comes back in this format -

{cat1: “Womenswear”, cat2: “Dresses”, cat3: “Party”}
{cat1: “Womenswear”, cat2: “Dresses”, cat3: “Casual”}
{cat1: “Womenswear”, cat2: “Dresses”, cat3: “Formal”}

I need to populate two other dropdown fields when I get the selected value of dropdown 1. However, when the data comes back from the database, there are duplicates that I cannot seem to remove from the first dropdown (Under womenswear, there can be multiple categories)

If there any way to filter out duplicate values. Of course I’ve got the issue now where Womenswear is being shown in the dropdown around 14 times.

Here is what I’ve used for the layout, as you can see I probably need to filter out in the view and not the controller if it can be helped

<ion-item style="margin-top: 10px">
		    	<ion-label>Category 1</ion-label>
		    		<ion-select #productCategory1 [selectOptions]="categoryList">
		      			<ion-option *ngFor="let category1 of categoryList; let i = index;" value="{{ i }}">{{ category1 }}</ion-option>
		    		</ion-select>
		  		</ion-item>
2

Loop through your initial list and create a second list of all the unique “cat1” values. Use that for the first ion-select.

3

I disagree. Filtering in the view is expensive and wasteful. Do everything you can in the controller, because then Angular’s change detection will work with you, not against you.

4

I actually don’t know why I didn’t think of this in the first place. I’ve only just jumped into Ionic now so I’ve just focused so much on the view and not on the controller side of things. This should have been simple. Thank you very much for the suggestions.

5

Thank you for the input. I’ve only just jumped into learning about how everything works and the change detection. Thank you very much.