Remove duplicate objects/data from an array of objects in Javascript

-

How to Remove duplicate object data from an array using JavaScript.

To remove the duplicate object data from an array, have to use the filter function. So, it will filter out the duplicate objects/data from an array.

Please see the below example.

Javascript 
var uniqueItems = [];

var sampleData =
  [
    { id: 1, name: 'firstname' },
    { id: 2, name: 'middlename' },
    { id: 1, name: 'firstname' },
    { id: 1, name: 'lastname' }
  ]

var duplicateItems = sampleData.filter(filteredData => {
  if (uniqueItems.find(items =>
    items.id === filteredData.id)) {
    return true;
  }
  uniqueItems.push(filteredData);
  return false;
});

Comments

Post a Comment

Popular posts from this blog

Send API POST Request in MS SQL Server

-
To send an API POST request in MS SQL Server using multipart/form-data, you can use the following T-SQL code: Example of content type : multipart/form-data SQL DECLARE @url VARCHAR(200) = 'https://example.com/api'; DECLARE @boundary VARCHAR(50) = '---------------------------' + CAST(NEWID() AS VARCHAR(36)); DECLARE @param1Name VARCHAR(50) = 'name'; DECLARE @param1Value VARCHAR(50) = 'John Doe'; DECLARE @param2Name VARCHAR(50) = 'email'; DECLARE @param2Value VARCHAR(50) = 'johndoe@example.com'; DECLARE @param3Name VARCHAR(50) = 'file'; DECLARE @param3Value VARBINARY(MAX) = (SELECT BulkColumn FROM OPENROWSET(BULK 'C:\path\to\file.txt', SINGLE_BLOB) AS x); DECLARE @param4Name VARCHAR(50) = 'description'; DECLARE @param4Value VARCHAR(200) = 'This is a sample file'; DECLARE @formData NVARCHAR(MAX) = N'--' + @boundary + CHAR(13) + CHAR(10) + ...
Read more

Content Negotiation in Web API with example

-
Content negotiation in Web API C# refers to the process of determining the best format for data exchange between the client and the server. It allows the client to specify the format they prefer to receive data in, and the server will send the data in that format if it's available. In Web API C#, content negotiation is done through the use of media formatters. A media formatter is responsible for serializing and deserializing the data in a specific format, such as JSON, XML, or plain text. The process of content negotiation in Web API C# involves the following steps: The client sends a request to the server and specifies the media type it prefers to receive the response in, through the Accept header in the HTTP request. The server receives the request and examines the Accept header to determine the media type requested by the client. The server then looks for a media formatter that can serialize the response in th...
Read more

Naming Conventions

-
Image
Naming Conventions is very important for any application for better readability of  code. What is Naming Convention ?  Naming conventions are general rules applied when creating text scripts for software programming. They have many different purposes, such as adding clarity and uniformity to scripts, readability for third-party applications, and functionality in certain languages and applications. They range from capitalization and punctuation to adding symbols and identifiers to signify certain functions. Advantages of Naming Conventions are : 1. Consistency 2. Better understanding the code 3. Readability 4. Automation Types of Naming Conventions:  1. camelCase : First letter should be lower case. 2. PascalCase :   All words should be upper case. 3. kebab-case : Use dash symbol between word to word with lower case. 4. snake_case : Use underscore symbol between word to word with lower case. How and where these naming conventions will use ? Please check this pos...
Read more

How to Convert JSON Object to XML in C#

-
Image
JSON (Javascript Object Notation) is very popular for web development. It is light weight data-exchange format. Most of the applications are using this format to exchange the data for web applications. Sample JSON array of Objects :  {    "users" : [       { "firstName" : "John" ,  "lastName" : "Peter" },       { "firstName" : "Wills" ,  "lastName" : "Smith" }     ] } To use this format, need to install the Newtonsoft.json package. For more detail and version related information you can find it ✋here . Open the Visual Studio, go to the package manager console and type the below command. Basic Definition of XML (Extensible Markup Language  is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. Sample XML format :  < root >    < user >         ...
Read more

Use immutable data structures to avoid unnecessary change detection In Angular

-
In Angular, change detection is triggered whenever there is a change in the component's data or state. This can be a performance bottleneck if the component's data is updated frequently, and the component has a lot of child components or bindings. One way to optimize change detection is to use immutable data structures. Immutable data structures are data structures that cannot be modified once they are created. Instead, when a change is made to the data, a new instance of the data structure is created with the updated values. Here's an example of how to use immutable data structures in Angular: HTML import { Component } from '@angular/core'; import { List } from 'immutable'; @Component({ selector: 'app-list', template: ` {{ item }} ` }) export class ListComponent { items = List (['item 1', 'item 2', 'item 3']); addItem() { // The...
Read more

Create a function to convert from string to Decimal using JavaScript

-
Create a function to convert a string to decimal using JavaScript. Javascript function parseStringToDecimal(inputValue: string): Number { let value: number; if (inputValue === '0.00' || Number(inputValue) === 0.00) { value = 0.00; } else if (inputValue === '') { value = null; } else { value = parseFloat(inputValue.toString().replace(/,/, '')); } return value; } Expected Result :  Example const value = parseStringToDecimal("1,000.256"); console.log(value); Output :  1000.256
Read more

Create Custom Form Control for ng-select in Angular

-
Image
How to Create Custom Form Control in Angular  Why we create custom form control ? Normally, we used to create custom form control for re-usability.  The best advantage is that to add common functionality and features in this custom form control and extend the functionality as per our need and requirement.  And we can use everywhere into the application. But this example will tell you how to create custom form control to extend the functionality of  angular ng-select component.  We are adding a feature for this control, multi selection along with checkbox. Before that, we need to know what is the basic syntax of creating custom form control in angular. So, we start by implementing the ControlValueAccessor interface from @angular/forms into the component. This interface has three functions that need to be implemented and one optional functional. writeValue(obj: any): void { } registerOnChange(fn: any): void ...
Read more

Map Operator in RxJs

-
The map operator in RxJS is used to transform the emissions of an Observable stream. It applies a function to each emitted value and returns a new Observable with the transformed values. The original values are not modified. The map operator is often used in combination with other operators to create complex data flows. Advantages of the map operator in RxJS include: Transformation of data : The map operator allows you to transform the data emitted by an Observable, which can be very useful for manipulating the data in the way you need it. Efficiency : The map operator is an efficient way to modify data, as it does not modify the original data and creates a new Observable with the transformed data. Composability : The map operator is a composable operator, which means you can combine it with other operators to create more complex data flows. Clarity : Using the map ope...
Read more

HTTP and grPC Communication protocols used in Microservices

-
Microservices architecture is an approach to building distributed systems that involves breaking down a large application into smaller, loosely coupled services that communicate with each other through APIs. There are several communication protocols used in microservices architecture, including HTTP and gRPC. HTTP: HTTP (Hypertext Transfer Protocol) is a widely used protocol for communication between web applications and servers. In microservices architecture, HTTP is used for communication between services as it's a well-established and reliable protocol that's widely supported. HTTP is simple and easy to use, and it supports a wide range of data formats like JSON, XML, and plain text, making it a popular choice for microservices communication. gRPC: gRPC is a modern, high-performance, open-source protocol for communication between microservices. It uses Google's Protocol Buffers as a data format, which is a language-neutral, platform-neu...
Read more

Angular Coding Styles and Standards - PART 1

-
Image
Coding Styles is very important to every application. It tells how the application is clean and neat.  Every programming language has common coding styles and standards. We must follow the few of the coding styles it will very helpful to application development. Then the code will easier to understand. In this post, listed few of the angular coding styles and standards with small examples. 1. Per file, the code should limit to 400 lines. import  {  Component  }  from   '@angular/core' ; @ Component ({    selector :   'app-root' ,    templateUrl :   './app.component.html' ,    styleUrls :  [ './app.component.scss' ] }) export   class   AppComponent  {    // Per file, the code should limit to 400 lines. } 2.  Per function, the code should limit to 75 lines. public   displayUserInformationToTable ():  void  {   //...
Read more