Sometimes, we want to map an array with duplicate values to a unique array in JavaScript.

In this article, we’ll look at how to map an array with duplicate values to a unique array in JavaScript.

How to map an array with duplicate values to a unique array in JavaScript?

To map an array with duplicate values to a unique array in JavaScript, we can use some array methods.

For instance, we write:

const data = [{
    "topicId": 1,
    "subTopicId": 1,
    "topicName": "a",
    "subTopicName1": "w"
  },
  {
    "topicId": 2,
    "subTopicId": 2,
    "topicName": "b",
    "subTopicName2": "x"
  },
  {
    "topicId": 3,
    "subTopicId": 3,
    "topicName": "c",
    "subTopicName3": "y"
  },
  {
    "topicId": 1,
    "subTopicId": 4,
    "topicName": "c",
    "subTopicName4": "z"
  }
];

const noDups = [...new Set(data.map(d => d.topicId))].map(topicId => {
  return data.find(d => d.topicId === topicId)
})
console.log(noDups)

We create a new set with the topicIds with the duplicates removed and spread that back to an array.

Then we call map with a callback to return the first item with the given topicId in data.

Therefore, noDups is:

[
  {
    "topicId": 1,
    "subTopicId": 1,
    "topicName": "a",
    "subTopicName1": "w"
  },
  {
    "topicId": 2,
    "subTopicId": 2,
    "topicName": "b",
    "subTopicName2": "x"
  },
  {
    "topicId": 3,
    "subTopicId": 3,
    "topicName": "c",
    "subTopicName3": "y"
  }
]

Conclusion

To map an array with duplicate values to a unique array in JavaScript, we can use some array methods.