how to remove duplicate objects from an array in reactjs

Question

I want to remove the duplicate objects in the array which was rendered on state change.

Below i have given the console output which has got 14 objects out of which 7 are duplicate.

I have used reduce, but the id which has got a different jobid also get deleted... I must filter based on jobid and remove the duplicate object which has got the same id.

appliedCandidate: Array(14)
0: {jobid: "atA3Qi4BJu01VrUasiSX", id: "I1bncvyBsjbu7ePdPvYt", firstName: "Krishnakumar K R", Title: "design job", empname: "Rakesh", …}
1: {jobid: "atA3Qi4BJu01VrUasiSX", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "design job", empname: "Rakesh", …}
2: {jobid: "atA3Qi4BJu01VrUasiSX", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "design job", empname: "Rakesh", …}
3: {jobid: "atA3Qi4BJu01VrUasiSX", id: "m9SC2DbWxTrlTxJr12p0", firstName: "test user", Title: "design job", empname: "Rakesh", …}
4: {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "1GMZpFhcOyDSt1KG4abK", firstName: "mohammed basheer", Title: "test job emp", empname: undefined, …}
5: {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "test job emp", empname: undefined, …}
6: {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "test job emp", empname: undefined, …}
7: {jobid: "atA3Qi4BJu01VrUasiSX", id: "I1bncvyBsjbu7ePdPvYt", firstName: "Krishnakumar K R", Title: "design job", empname: "Rakesh", …}
8: {jobid: "atA3Qi4BJu01VrUasiSX", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "design job", empname: "Rakesh", …}
9: {jobid: "atA3Qi4BJu01VrUasiSX", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "design job", empname: "Rakesh", …}
10: {jobid: "atA3Qi4BJu01VrUasiSX", id: "m9SC2DbWxTrlTxJr12p0", firstName: "test user", Title: "design job", empname: "Rakesh", …}
11: {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "1GMZpFhcOyDSt1KG4abK", firstName: "mohammed basheer", Title: "test job emp", empname: undefined, …}
12: {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "test job emp", empname: undefined, …}
13: {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "test job emp", empname: undefined, …}

Varun Suresh Kumar · Accepted Answer · 2019-03-30 07:32:44Z

19

Hope this oneliner helps

const arr = [{jobid: "atA3Qi4BJu01VrUasiSX", id: "I1bncvyBsjbu7ePdPvYt", firstName: "Krishnakumar K R", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "m9SC2DbWxTrlTxJr12p0", firstName: "test user", Title: "design job", empname: "Rakesh"},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "1GMZpFhcOyDSt1KG4abK", firstName: "mohammed basheer", Title: "test job emp", empname: undefined},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "test job emp", empname: undefined},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "test job emp", empname: undefined},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "I1bncvyBsjbu7ePdPvYt", firstName: "Krishnakumar K R", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "m9SC2DbWxTrlTxJr12p0", firstName: "test user", Title: "design job", empname: "Rakesh"},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "1GMZpFhcOyDSt1KG4abK", firstName: "mohammed basheer", Title: "test job emp", empname: undefined},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "test job emp", empname: undefined},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "test job emp", empname: undefined}]

let pp = arr.filter( (ele, ind) => ind === arr.findIndex( elem => elem.jobid === ele.jobid && elem.id === ele.id))

console.log(pp)

answered Mar 30, 2019 at 7:32

Varun Suresh Kumar

8791 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rakesh Rajan Over a year ago

please do let me know your email id so that i could mail you on any issue in my react project

Junia Montana Over a year ago

Thank you so much! This is the only example that actually works perfectly!

Utsav Patel · Accepted Answer · 2019-03-30 07:22:08Z

2

You can simply create a map from the array after filtering by jobid, which will contain unique values.

let map = {};
array.map(element => {
 if(!map(element.id)){
  map[element.id] = element;
}
})

After this you can take the values as Object.values(map). This will contain unique elements.

edited Mar 30, 2019 at 7:22

answered Mar 30, 2019 at 7:09

Utsav Patel

2,9171 gold badge19 silver badges27 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2019-03-30 07:34:02Z

You simply need to filter based on both id and jobid combination. To do that you can group data by jobid and search within that jobid

const arr = [{jobid: "atA3Qi4BJu01VrUasiSX", id: "I1bncvyBsjbu7ePdPvYt", firstName: "Krishnakumar K R", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "m9SC2DbWxTrlTxJr12p0", firstName: "test user", Title: "design job", empname: "Rakesh"},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "1GMZpFhcOyDSt1KG4abK", firstName: "mohammed basheer", Title: "test job emp", empname: undefined},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "test job emp", empname: undefined},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "test job emp", empname: undefined},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "I1bncvyBsjbu7ePdPvYt", firstName: "Krishnakumar K R", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "design job", empname: "Rakesh"},
{jobid: "atA3Qi4BJu01VrUasiSX", id: "m9SC2DbWxTrlTxJr12p0", firstName: "test user", Title: "design job", empname: "Rakesh"},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "1GMZpFhcOyDSt1KG4abK", firstName: "mohammed basheer", Title: "test job emp", empname: undefined},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "test job emp", empname: undefined},
{jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "test job emp", empname: undefined}]

const temp = arr.reduce((acc, item) => {
   //console.log(item.id, item.jobid);
   if(acc[item.jobid]) {
      //console.log(acc[item.jobid]);
      const idx = acc[item.jobid].findIndex(data => data.id === item.id);
      //console.log(item.jobid, idx)
      if(idx === -1) {
        acc[item.jobid].push(item);
      }
   } else {
      acc[item.jobid] = [item];
   }
   //console.log(acc)
   return acc;
}, {});

let res = []; Object.values(temp).forEach(item => res= res.concat(item));
console.log(res)

@RakeshRajan, updated the answer, the condition was a little incorrect. IT should have been if(idx === -1) {

tam.dangc · Accepted Answer · 2019-03-30 07:54:18Z

Create a tmp variable to store the item already existed will decrease the loop, instead of search the whole array for each item in the array.

const arr = [
  {jobid: "atA3Qi4BJu01VrUasiSX", id: "I1bncvyBsjbu7ePdPvYt", firstName: "Krishnakumar K R", Title: "design job", empname: "Rakesh"},
  {jobid: "atA3Qi4BJu01VrUasiSX", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "design job", empname: "Rakesh"},
  {jobid: "atA3Qi4BJu01VrUasiSX", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "design job", empname: "Rakesh"},
  {jobid: "atA3Qi4BJu01VrUasiSX", id: "m9SC2DbWxTrlTxJr12p0", firstName: "test user", Title: "design job", empname: "Rakesh"},
  {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "1GMZpFhcOyDSt1KG4abK", firstName: "mohammed basheer", Title: "test job emp", empname: undefined},
  {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "test job emp", empname: undefined},
  {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "test job emp", empname: undefined},
  {jobid: "atA3Qi4BJu01VrUasiSX", id: "I1bncvyBsjbu7ePdPvYt", firstName: "Krishnakumar K R", Title: "design job", empname: "Rakesh"},
  {jobid: "atA3Qi4BJu01VrUasiSX", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "design job", empname: "Rakesh"},
  {jobid: "atA3Qi4BJu01VrUasiSX", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "design job", empname: "Rakesh"},
  {jobid: "atA3Qi4BJu01VrUasiSX", id: "m9SC2DbWxTrlTxJr12p0", firstName: "test user", Title: "design job", empname: "Rakesh"},
  {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "1GMZpFhcOyDSt1KG4abK", firstName: "mohammed basheer", Title: "test job emp", empname: undefined},
  {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "MDxEVS2hKftDrrPXsSWL", firstName: "test Candidate", Title: "test job emp", empname: undefined},
  {jobid: "nCBNJ1yEn4EaGLR4BHDc", id: "Mmu7oiAoCNcaU2ZWlLeS", firstName: "Rakesh", Title: "test job emp", empname: undefined}
]

const tmp = new Map()
const rs = arr.reduce((acc, e) => {
  if(tmp.has(e.id)) {
    if (!tmp.get(e.id).includes(e.jobid)) {
      acc.push(e)
      tmp.set(e.id, [...tmp.get(e.id), e.jobid])
    }
  } else {
    acc.push(e)
    tmp.set(e.id, [e.jobid])
  }
  return acc
}, [])

console.log(rs)

Collectives™ on Stack Overflow

how to remove duplicate objects from an array in reactjs

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related