Using TypeScript to eliminate duplicate values when constructing an array with various properties

Question

Using TypeScript to eliminate duplicate values when constructing an array with various properties

Recently, I received an array from an API that has the following structure:

results = [
  {name: 'Ana', country: 'US', language: 'EN'},
  {name: 'Paul', country: 'UK', language: 'EN'},
  {name: 'Luis', country: 'PH', language: 'SP'},
  {name: 'Tom', country: 'US', language: 'EN'}
];

I want to transform this array into a new one that looks like this:

countries = [
  {filter: 'country', value: 'PH'},
  {filter: 'country', value: 'UK'},
  {filter: 'country', value: 'US'},
];

To achieve this, I attempted the following code snippet:

countries = Array.from([...new Set(this.results.map(item => ({categoryOfFilter: 'country', value: item.country})))]);

However, despite using the set, the resulting array contains duplicates. It ends up looking like this:

countries = [
  {filter: 'country', value: 'US'},
  {filter: 'country', value: 'UK'},
  {filter: 'country', value: 'PH'},
  {filter: 'country', value: 'US'},
];

Do you have any insights or suggestions for solving this issue? Javascript has never been my strong suit so any help is greatly appreciated.

arrays angular typescript

Answer 1

Answer №1

The Set object is a useful tool for storing unique values of any type, be it primitive values or references to objects.

When it comes to objects, Sets function differently. Each item in the Set is considered unique based on their object references, even if their attribute values are identical.

Here's how you can use Sets with objects:

results = [
  {name: 'Ana', country: 'US', language: 'EN'},
  {name: 'Paul', country: 'UK', language: 'EN'},
  {name: 'Luis', country: 'PH', language: 'SP'},
  {name: 'Tom', country: 'US', language: 'EN'}
];

// Create a set containing all unique country codes from the results array
const countryCodes = new Set(results.map(item => item.country));

// Transform the set values into an array and map it to target objects
const countries = [...countryCodes].map(value => {return {filter: 'country', value}});

console.log(countries);

Answer 2

The Set object is a useful tool for storing unique values of any type, be it primitive values or references to objects.

When it comes to objects, Sets function differently. Each item in the Set is considered unique based on their object references, even if their attribute values are identical.

Here's how you can use Sets with objects:

results = [
  {name: 'Ana', country: 'US', language: 'EN'},
  {name: 'Paul', country: 'UK', language: 'EN'},
  {name: 'Luis', country: 'PH', language: 'SP'},
  {name: 'Tom', country: 'US', language: 'EN'}
];

// Create a set containing all unique country codes from the results array
const countryCodes = new Set(results.map(item => item.country));

// Transform the set values into an array and map it to target objects
const countries = [...countryCodes].map(value => {return {filter: 'country', value}});

console.log(countries);

Answer 3

Answer №2

Check out this awesome code snippet on CodePen: https://codepen.io/kyletanders/pen/NWqpWVX?editors=0012

Here's an example similar to the one shown:


    const data = [
      {name: 'Ana', country: 'US', language: 'EN'},
      {name: 'Paul', country: 'UK', language: 'EN'},
      {name: 'Luis', country: 'PH', language: 'SP'},
      {name: 'Tom', country: 'US', language: 'EN'}
    ];

    let unique = [...new Set(data.map(item => item.country))].map(x => {return {filter: 'Country', value: x}});
    console.log(unique);

Answer 4

Check out this awesome code snippet on CodePen: https://codepen.io/kyletanders/pen/NWqpWVX?editors=0012

Here's an example similar to the one shown:


    const data = [
      {name: 'Ana', country: 'US', language: 'EN'},
      {name: 'Paul', country: 'UK', language: 'EN'},
      {name: 'Luis', country: 'PH', language: 'SP'},
      {name: 'Tom', country: 'US', language: 'EN'}
    ];

    let unique = [...new Set(data.map(item => item.country))].map(x => {return {filter: 'Country', value: x}});
    console.log(unique);

Using TypeScript to eliminate duplicate values when constructing an array with various properties

Answer №1

Answer №2

Similar questions

What are the appropriate scenarios to utilize the declare keyword in TypeScript?

Only pass props to `Image` if they have a defined value

Customizing colors for the progress bar in Angular Material

Using Angular, Typescript, and ngxs to manage state observables, one may wonder what exactly a variable ending with an exclamation mark (!) signifies. An example of this can be seen in the following code snippet:

The operation to assign a value to property 'two' cannot be completed as it is currently undefined

Why is my Angular proxy failing to rewrite the path when making an HTTP GET request?

How can you develop a component that is reusable and make sure that the template reference variable can be assigned to the cdkDropList directive?

Tips for incorporating asynchronous page components as a child element in next.js?

What Causes a Mongoose Query to Result in an Empty Array?

Let's explore further - delving into JSON & array manipulation using the foreach loop in Pure JavaScript

The npm start command is no longer functioning in Angular 5

Transform a string into a class in Typescript/Angular

Leveraging ES Module packages in Azure TypeScript Function Development

Arranging secondary rankings through elimination within a multi-dimensional array

What is the reason the 'Add' type does not meet the 'number' constraint?

Recursive types in TypeScript allow for the definition of types that

Use $lookup with nested subdocuments

Despite the fact that one field is optional, failing to enter it will still result in the form being considered invalid

The issue with the demo variable not functioning properly within the ngOnChanges method of the child component

Collections of references pointing to collections of integer values