get the first of duplicates in array of objects javascript

Question

I have the following data structure that i receive from the api:

[
  {
    id: '10000844',
    text_id: '10000844-01',
  },
  {
    id: '10000844',
    text_id: '10000844-02',
  },
  {
    id: '12000844',
    text_id: '12000844-03',
  },
  {
    id: '12000844',
    text_id: '12000844-07',
  },
  {
    id: '12000814',
    text_id: '12000844-07',
  },
 {
    id: '12002812',
    text_id: '12000844-07',
  },
   {
    id: '12000814',
    text_id: '12000844-08',
  },
]

The perfect outcome of cleaning the code would be this result, basically returning only the first found id:

[
      {
        id: '10000844',
        text_id: '10000844-01',
      },
      {
        id: '12000844',
        text_id: '12000844-03',
      },
      {
        id: '12000814',
        text_id: '12000844-07',
      },
     {
        id: '12002812',
        text_id: '12000844-07',
      },
    ]

But currently it only returns the last found duplicate in a unique array, with the current code:

let uniqueArray = [...new Map(data.map(item =>
    [item.id, item])).values()];

https://stackoverflow.com/questions/2218999/how-to-remove-all-duplicates-from-an-array-of-objects — cmgchess, Jun 29 '22 at 06:39

Xupitan · Answer 1 · 2022-06-29T07:01:31.423

4

You can use Object.values() and reduce() same as :

const data = [
  {
    id: '10000844',
    text_id: '10000844-01',
  },
  {
    id: '10000844',
    text_id: '10000844-02',
  },
  {
    id: '12000844',
    text_id: '12000844-03',
  },
  {
    id: '12000844',
    text_id: '12000844-07',
  },
  {
    id: '12000814',
    text_id: '12000844-07',
  },
 {
    id: '12002812',
    text_id: '12000844-07',
  },
   {
    id: '12000814',
    text_id: '12000844-08',
  },
]

const result = Object.values(
  data.reduce((res, {id, text_id}) => {
    res[id] ??= {id, text_id}
    return res
  }, {})
)
console.log(result)

Update with ??= document

The logical nullish assignment (x ??= y) operator only assigns if x is nullish (null or undefined).

edited Jun 29 '22 at 07:01

answered Jun 29 '22 at 06:49

Xupitan

1,601
1
8
12

You may want to explain what `??=` does. – Andy Jun 29 '22 at 06:55
You can check it in : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment – Xupitan Jun 29 '22 at 06:59
:) _I_ know what it means but it's a relatively new feature so might be confusing. +1 for updating your answer. – Andy Jun 29 '22 at 07:23
I understood what you meant so I updated the answer – Xupitan Jun 29 '22 at 07:25

score 0 · Answer 2 · answered Jun 29 '22 at 06:42

You can do it like this:

const arr = [
  {
    id: '10000844',
    text_id: '10000844-01',
  },
  {
    id: '10000844',
    text_id: '10000844-02',
  },
  {
    id: '12000844',
    text_id: '12000844-03',
  },
  {
    id: '12000844',
    text_id: '12000844-07',
  },
  {
    id: '12000814',
    text_id: '12000844-07',
  },
 {
    id: '12002812',
    text_id: '12000844-07',
  },
   {
    id: '12000814',
    text_id: '12000844-08',
  },
];
const unique = [];
const visited = new Set();
for(let i = 0; i < arr.length; ++i){
  if(!visited.has(arr[i].id)){
    unique.push(arr[i]);
    visited.add(arr[i].id);
  }
}

console.log(unique);

"You can do it like this" is not good documentation for an answer. — Andy, Jun 29 '22 at 06:56

score 0 · Answer 3 · answered Jun 29 '22 at 06:45

Concept

Loop through all the objects in the data and check if the id is found in result array. If not found then push it into the result array; otherwise, skip it.

Code

const data = [{
    id: '10000844',
    text_id: '10000844-01',
  },
  {
    id: '10000844',
    text_id: '10000844-02',
  },
  {
    id: '12000844',
    text_id: '12000844-03',
  },
  {
    id: '12000844',
    text_id: '12000844-07',
  },
  {
    id: '12000814',
    text_id: '12000844-07',
  },
  {
    id: '12002812',
    text_id: '12000844-07',
  },
  {
    id: '12000814',
    text_id: '12000844-08',
  },
];
let result = [];
let found;
data.forEach(d => {
  found = false;
  result.forEach(r => {
    if (!found && r.id === d.id) found = true;
  })
  if (!found) result.push(d);
});
console.log(result);

If the ids are not in order this will not work be careful! – mgm793 Jun 29 '22 at 06:47 — mgm793, Jun 29 '22 at 06:47

SSM · Answer 4 · 2022-06-29T06:54:27.533

0

You can reduce the array into an object that stores only the first occurrence of every id and then extract the values from this object.

const 
  data = [{ id: "10000844", text_id: "10000844-01" }, { id: "10000844", text_id: "10000844-02" }, { id: "12000844", text_id: "12000844-03" }, { id: "12000844", text_id: "12000844-07" }, { id: "12000814", text_id: "12000844-07" }, { id: "12002812", text_id: "12000844-07" }, { id: "12000814", text_id: "12000844-08" }],
  result = Object.values(data.reduce((acc, d) => (!acc[d.id] ? { ...acc, [d.id]: d } : acc), {}));

console.log(result);

edited Jun 29 '22 at 06:54

answered Jun 29 '22 at 06:49

SSM

2,855
1
3
10

You may want to document how that one-liner works since it will be gibberish to beginners. – Andy Jun 29 '22 at 06:55

score 0 · Answer 5 · answered Jun 29 '22 at 06:50

Here is another way to achieve you desire output.
we use reduce for changing in data and use find function to get current id is already in prev or not if not then we use filter function to filter out same id object and push only first.

const data =[
  {
    id: '10000844',
    text_id: '10000844-01',
  },
  {
    id: '10000844',
    text_id: '10000844-02',
  },
  {
    id: '12000844',
    text_id: '12000844-03',
  },
  {
    id: '12000844',
    text_id: '12000844-07',
  },
  {
    id: '12000814',
    text_id: '12000844-07',
  },
 {
    id: '12002812',
    text_id: '12000844-07',
  },
   {
    id: '12000814',
    text_id: '12000844-08',
  },
]

const newData = data.reduce((prev, curr, index, arr) => {
  const find = prev.find(p => p.id === curr.id);
  if (!find) {
    const filter = arr.filter(f => f.id === curr.id);
    if (filter.length >= 1) {
      prev.push(filter[0])
    }
  }
  return prev;
}, [])

console.log(newData)

score 0 · Answer 6 · answered Jun 29 '22 at 06:57

Some of the answers are already correct.

THIS ANSWER IS ONLY IF YOU ARE USING LODASH

You can use uniqBy.

This will return a duplicate-free version of an array where the first occurrence is the one that will be kept:

So in your case, something like

import uniqBy from 'lodash/uniqBy';

// dataFromAPI is your sample data
const unqiueArray = uniqBy(dataFromAPI, 'id');

score 0 · Answer 7 · answered Jun 29 '22 at 07:15

Sometimes a simple loop is the way forward.

Create a temporary object
Iterate over the data adding objects to that object if their key can't be found.
Get the values of the output object

const data=[{id:"10000844",text_id:"10000844-01"},{id:"10000844",text_id:"10000844-02"},{id:"12000844",text_id:"12000844-03"},{id:"12000844",text_id:"12000844-07"},{id:"12000814",text_id:"12000844-07"},{id:"12002812",text_id:"12000844-07"},{id:"12000814",text_id:"12000844-08"}];

// Initialise the output object
const out = {};

// Loop over the array of objects
for (const obj of data) {

  // For each object destructure the id from the rest
  // of its properties 
  const { id, ...rest } = obj;

  // If there is no property on the output
  // object with that key create it by adding
  // an object composed of the id and the other
  // object properties to it
  out[id] ??= { id, ...rest };
}

// Now return an array of
// the output object's values
console.log(Object.values(out));

Additional documentation

get the first of duplicates in array of objects javascript

7 Answers7

Linked