Show the distinct values of a mat-select element that retrieves information from an Angular filtered dataSource

Question

Show the distinct values of a mat-select element that retrieves information from an Angular filtered dataSource

Working on an Angular 9 app where data is displayed using a mat-table and filtered based on certain fields. The issue I'm facing is that the dropdown menu shows duplicate values, which is expected since some values may be repeated in the dataset. The data displayed is from a mat-table dataSource.filteredData, so using new Set() or similar methods is not an option. How can I modify my code to show only unique values in the dropdown?

Here is a snippet of my code:

<mat-form-field appearance="fill">
    <mat-label>Select an option</mat-label>
    <mat-select>
        <mat-option *ngFor="let country of dataSource.filteredData">{{country.name}}</mat-option>
    </mat-select>
</mat-form-field>

...

<table>
...
</table>

Note: I attempted to create a Pipe for uniqueness, but it only works effectively for static Arrays, and my Array changes with each filter. Any suggestions on how to tackle this issue? Thank you for your assistance 😊

angular typescript mat-table

Answer 1

Answer №1

I have successfully found a working solution by refactoring the ngFor code and implementing a function that generates an array with unique values.

To begin, I created a function that produces the non-repeated array:

// This method requires only the name of the field/key you wish to find unique values for
generateUniqueArray(field: string): string[] {
    // Initialize an empty array to store the unique values
    let uniqueArray = [];
    // Loop through the filteredData
    for (let item of this.dataSource.filteredData) {
        // Add the value of the specified field to the array
        uniqueArray.push(item[field]);
    }
    // Sort the array alphabetically
    uniqueArray = uniqueArray.sort();
    // Utilize ES6 Set to return an array with unique values
    return [...new Set(uniqueArray)];
}

For more information on Set ES6, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

Refactored ngFor usage:

<mat-form-field appearance="fill">
    <mat-label>Select an option</mat-label>
    <mat-select>
        <mat-option *ngFor="let item of generateUniqueArray('country')">{{item}}</mat-option>
    </mat-select>
</mat-form-field>

Answer 2

I have successfully found a working solution by refactoring the ngFor code and implementing a function that generates an array with unique values.

To begin, I created a function that produces the non-repeated array:

// This method requires only the name of the field/key you wish to find unique values for
generateUniqueArray(field: string): string[] {
    // Initialize an empty array to store the unique values
    let uniqueArray = [];
    // Loop through the filteredData
    for (let item of this.dataSource.filteredData) {
        // Add the value of the specified field to the array
        uniqueArray.push(item[field]);
    }
    // Sort the array alphabetically
    uniqueArray = uniqueArray.sort();
    // Utilize ES6 Set to return an array with unique values
    return [...new Set(uniqueArray)];
}

For more information on Set ES6, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

Refactored ngFor usage:

<mat-form-field appearance="fill">
    <mat-label>Select an option</mat-label>
    <mat-select>
        <mat-option *ngFor="let item of generateUniqueArray('country')">{{item}}</mat-option>
    </mat-select>
</mat-form-field>

Answer 3

Answer №2

Take advantage of the following ES6 functionality:

this.array = this.array.filter((value, index, array) => array.indexOf(value) === index)

Answer 4

Take advantage of the following ES6 functionality:

this.array = this.array.filter((value, index, array) => array.indexOf(value) === index)

Show the distinct values of a mat-select element that retrieves information from an Angular filtered dataSource

Answer №1

Answer №2

Similar questions

There are no markers or popups currently displayed on the map

Deactivating a Component in Ionic Angular

What is the best way to apply a custom date format of 'MM/DD/YYYY H:MM am/pm' with moment.js?

Exploring the integration of a standalone component in Angular 17 using an http service

The index access type cannot be used with T[Key extends keyof T]

Guide to building a universal model in Angular 2

When considering Angular directives, which is more suitable for this scenario: structural or attribute?

Combining Rollup, Typescript, and converting images to base64 during the loading process

Navigating resolvedUrl with getServerSideProps in the newest version of NextJS - a comprehensive guide

Entering _this

Limiting the number of characters in a PrimeNG Quill editor

Special scenarios requiring OnPush Change Detection

Guide on testing a function with a dependency in Angular through unit testing

Trouble with parsing JSON in rxjs ajax response

What is the process for creating a coverage report for a TypeScript extension in vscode?

Dealing with Angular API Requests and Handling Cors Exception in C# Web API

Next.js Enhanced with Google Analytics

Guide on how to connect several Subjects within an object literal to their corresponding Observables in another object literal

Creating interfaces within props is essential for defining the structure of components

Error message displayed indicating script not found after executing yarn tsc within a Docker container