Unlocking the values of a property from an array of objects in JavaScript

Question

Unlocking the values of a property from an array of objects in JavaScript

I am faced with an array that has the following structure:

const array = [
    { id: "LAX" },
    { id: "BAS" },
    { id: "TES" },
    { id: "LAX" },
    { id: "LAX" },
    { id: "ATL" },
    { id: "BNA" },
    { id: "LAX" },
  ];

I have been attempting to eliminate duplicate values of id using Set

[...new Set(array)]

This method is not proving to be effective at the moment.

My goal is essentially to achieve a final outcome resembling the following:

["LAX", "BAS", "TES"....] // without any duplicates.

Do you know of any ES6 solutions for this issue?

javascript

Answer 1

Answer №1

If you want to efficiently create your data using a Set, it's important to first map your data according to a specific key. This simple solution can help:

const array =[
  {id: "NYC"},
  {id: "CHI"},
  {id: "MIA"},
  {id: "NYC"},
  {id: "NYC"},
  {id: "LA"},
  {id: "SF"},
  {id: "NYC"}]
const result = [...new Set(array.map(item => item.id))]

Answer 2

If you want to efficiently create your data using a Set, it's important to first map your data according to a specific key. This simple solution can help:

const array =[
  {id: "NYC"},
  {id: "CHI"},
  {id: "MIA"},
  {id: "NYC"},
  {id: "NYC"},
  {id: "LA"},
  {id: "SF"},
  {id: "NYC"}]
const result = [...new Set(array.map(item => item.id))]

Answer 3

Answer №2

I believe this code snippet could be the solution you're looking for.

const elements = [
  { id: "NYC" },
  { id: "CHI" },
  { id: "SF" },
  { id: "NYC" },
  { id: "NYC" },
  { id: "LA" },
  { id: "MIA" },
  { id: "NYC" },
];
const uniqueElements = new Set();
elements.forEach((item) => uniqueElements.add(item.id));
const uniqueArray = Array.from(uniqueElements);

Answer 4

I believe this code snippet could be the solution you're looking for.

const elements = [
  { id: "NYC" },
  { id: "CHI" },
  { id: "SF" },
  { id: "NYC" },
  { id: "NYC" },
  { id: "LA" },
  { id: "MIA" },
  { id: "NYC" },
];
const uniqueElements = new Set();
elements.forEach((item) => uniqueElements.add(item.id));
const uniqueArray = Array.from(uniqueElements);

Answer 5

Answer №3

let items = [{
    name: "Apple"
  },
  {
    name: "Banana"
  },
  {
    name: "Orange"
  },
  {
    name: "Apple"
  },
  {
    name: "Apple"
  },
  {
    name: "Peach"
  },
  {
    name: "Grape"
  },
  {
    name: "Apple"
  }
];
const uniqueItems = [...new Map(items.map((item) => [item.name, item])).values()];
console.log(uniqueItems)

Answer 6

let items = [{
    name: "Apple"
  },
  {
    name: "Banana"
  },
  {
    name: "Orange"
  },
  {
    name: "Apple"
  },
  {
    name: "Apple"
  },
  {
    name: "Peach"
  },
  {
    name: "Grape"
  },
  {
    name: "Apple"
  }
];
const uniqueItems = [...new Map(items.map((item) => [item.name, item])).values()];
console.log(uniqueItems)

Unlocking the values of a property from an array of objects in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Angular: The application has encountered an error due to an undefined property reading issue, resulting in a type error

ng-click - triggers a function and then redirects to another page

NodeJS - Headers cannot be modified once they have already been sent to the client

Unable to modify the ID of the initial element in the <template> tag

The GIPHY API object returns no results

Issues with UA PhoneGap 2.0 plugin failing to initialize properly on iOS device

Exploring React-Redux: The Origin of Children Components

Include the array in the 'content' property of the CSS using Jquery

Ensure that each of the two divs maintains a 16:9 aspect ratio, and utilize one div to fill any remaining empty space through the

The JSON formatting is incorrect

Determine the scale and position adjustments by assessing the pageYOffset

What is the most effective method for preserving RichText (WYSIWYG output)?

Constructing a table in React using columns instead of the traditional rows

Error: Webpack has encountered difficulty in resolving a third-party module

Looking for the most effective method of defining multiple configurations in a multi-build Vue js application?

How to make a node_module global with the power of Webpack 2

Error: Attempting to access properties of an undefined variable (specifically 'document') is not allowed

Is it possible to update table cell content depending on selected option?

Tips for concealing overlay when the cursor hovers

`What is the best way to access value during an onChange event?`