Get unique values from Array in Angular

Get unique values from Array in Angular , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE

 

In this article, we will learn how to remove duplicate items from Array in Angular

Playing with the array is very common in any programming language. Very often we faced a situation where we need to remove duplicate items from Array. so here we will learn 3 different ways to remove duplicate items from Array

Step 1 : By using Set

 

GetUniqueItemsBySets() {

this.uniqueItemsbySets = [...new Set(this.duplicateArray)];

}

 

 

Step 2 : By foreach

 

GetUniqueItemsByForeach() {

this.duplicateArray.forEach(items => {

if (!this.uniqueItemsbyForeach.includes(items)) {

this.uniqueItemsbyForeach.push(items);

}

});

}

 

 

Step 2 : By filter

 

GetUniqueItemsByfilter() {

this.duplicateArray.filter(items => {

if (this.uniqueItemsbyfilter.indexOf(items) === (-1)) {

this.uniqueItemsbyfilter.push(items);

}

});

}

 

 

Complete code is as below

 

import { Component, OnInit } from '@angular/core'; 

 

 

@Component({

selector: 'app-unique-items-from-array',

templateUrl: './unique-items-from-array.component.html',

styleUrls: ['./unique-items-from-array.component.scss']

})

export class UniqueItemsFromArrayComponent implements OnInit {

 

constructor() { }

duplicateArray = ['Apples', 'Apricots', 'Avocados', 'Apples', 'Apricots', 'Avocados', 'Bananas',

'Boysenberries', 'Blueberries', 'Bing Cherry', 'Cherries', 'Cantaloupe', 'Crab apples', 'Clementine',

'Cucumbers', 'Cherries', 'Cantaloupe', 'Crab apples', 'Clementine', 'Cucumbers'];

uniqueItemsbyForeach = [];

uniqueItemsbyfilter = [];

uniqueItemsbySets = [];

ngOnInit(): void {

this.GetUniqueItemsByForeach();

this.GetUniqueItemsByfilter();

this.GetUniqueItemsBySets();

}

 

GetUniqueItemsByForeach() {

this.duplicateArray.forEach(items => {

if (!this.uniqueItemsbyForeach.includes(items)) {

this.uniqueItemsbyForeach.push(items);

}

});

}

 

GetUniqueItemsByfilter() {

this.duplicateArray.filter(items => {

if (this.uniqueItemsbyfilter.indexOf(items) === (-1)) {

this.uniqueItemsbyfilter.push(items);

}

});

}

 

GetUniqueItemsBySets() {

this.uniqueItemsbySets = [...new Set(this.duplicateArray)];

}

 

}

 

 

Ref Link
https://github.com/coremicroservices/Arrays

 

With ❤️ Happy Coding

Comments

Post a Comment

Popular posts from this blog

How to disable table row in Angular

How to disable table row in Angular ? , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE   How to disable table row in Angular In this article we will learn how to disable every alternate (even) row in Table by using CSS. Step 1: Let's create an HTML table using below code                                     <table class="main-table">                   <thead>                      <tr>                         <th>                             Sr No.                          </th>                         <th>                              Fruit Name                          </th>                      </tr>                   </thead>                   <tbody>                      <tr *ngFor="let fruit of duplicateArray; let i = index; let even = even">                         
Read more

How to create XML file dynamically in c#.net?

Image
How to disable table row in Angular ? , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE How to create XML file dynamically in c#.net? In this article we will learn , How to create dynamic file in c#.net using ASP.NET CORE C# Step 1: Let's create a solution to implement How to create XML file dynamically in c#.net? File -> New -> Project -> ASP.NET Core Web Application -> Next -> Enter file name and click create Step 2: Create a new action method in Home controller and create a view and add below html code in view @{ ViewData["Title"] = "Generate XML File"; } @ViewData["Title"] We will use this page to generate XML file. Step 3: Create a new action like below and have a look on below Code [HttpPost] public IActionResult GenerateXMLFile(string action) { if (!string.IsNullOrEmpty(action)) { string xmlData = generateFile(); string xmlString = xmlData; string f
Read more

How to get Array value in Angular ?

How to get Array value in Angular ? , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE How to get Array value in Angular? In this article we will learn , How to get array value in Angular . Step 1 : Create a new Angular Project using below command ng new angular-tour-of-heroes Step 2 : Create a new component using below command ng generate component how-to-get-array-value-in-angular Step 3 : Add Below code in how-to-get-array-value-in-angular.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-how-to-get-array-angular', templateUrl: './how-to-get-array-angular.component.html', styleUrls: ['./how-to-get-array-angular.component.scss'] }) export class HOWTOGETArrayAngularComponent implements OnInit { fruits = ['Apple', 'Orange', 'Banana', 'blackberry', 'blackcurrant', 'blueberry', 'cherry' , 'coconut'
Read more