Returning a set or array of unique values from an observable pipe

Issue

I am not sure on how to proceed in filtering out for distinct values since the filtering is happening within a .pipe()

<mat-form-field class="filterField">
  <input formControlName="filterParam2"
         matInput
         placeholder="Filter"
         [matAutocomplete]="autoSingleSelect"
         (click)="$event.stopPropagation()"
         (keydown)="updateManualPage(1)" />
  <mat-autocomplete class="filterSelect"
                    panelClass="filterSelect"
                    #autoSingleSelect="matAutocomplete"
                    (optionSelected)="updateManualPage(1)">
    <mat-option [value]=""></mat-option>
    <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async"
                [value]="option.param2">
      {{option.param2}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

this.dropdownSingleFilteredOptions = this.tableFormGroup.controls['filterParam2'].valueChanges.pipe(
  startWith(''),
  map((value: string) => {
    value = value ?? "";
    return this.tableDataSource.data.filter(data => data.param2.toLowerCase().includes(value.toLowerCase()));
  })
);

I am unsure of how I can can display only unique values for the <mat-autocomplete>. e.g. if I have 2 objects [{id: 1, word: 'lorem'} {id: 2, word: 'lorem'}] to only display one entry in the <mat-autocomplete>

Solution

.valueChanges returns an observable and stores it in dropdownSingleFilteredOptions. The dropdownSingleFilteredOptions | async subscribes to this observable and the values return are piped through the pipe(). So this should all be okay. Your filtering code should fire.

It looks like you are doing search filtering on your tableDataSource. Are you saying you need to remove duplicates in tableDataSource on top of that?

In that case you can chain another filter on after your search filter: .filter((value, index) => data.indexOf(value) === index)

Answered By - MortenOdum