remove duplicate of specific value of object in array reactjs

Question

I have a object array that has a value like this

[
    {
        username: 'Goku',
        hero: 'superman',
        power: 'laser',
        isMasked: false
    },
    {
        username: 'Gohan',
        hero: 'batman',
        power: 'brain',
        isMasked: true
    },
    {
        username: 'Goten',
        hero: 'cyclops',
        power: 'laser',
        isMasked: true
    },
    {
        username: 'picollo',
        hero: 'superman',
        power: 'streangth',
        isMasked: false
    },
    {
        username: 'bulma',
        hero: 'batman',
        power: 'rich',
        isMasked: true
    },
    {
        username: 'brolly',
        hero: 'jin',
        power: 'laser',
        isMasked: false
    }
]

As you can see, the array contains a json that has a different heroes, some of them have a same power, but the problem is, some user had a same heroes, what I want to do is that I want to remove those objects inside my array that contains a same heroes as others, so that the output will be

[
    {
        username: 'Goku',
        hero: 'superman',
        power: 'laser',
        isMasked: false
    },
    {
        username: 'Gohan',
        hero: 'batman',
        power: 'brain',
        isMasked: true
    },
    {
        username: 'Goten',
        hero: 'cyclops',
        power: 'laser',
        isMasked: true
    },
    {
        username: 'brolly',
        hero: 'jin',
        power: 'laser',
        isMasked: false
    }
]

As you can see, users with the same hero as another is removed, and the array only contains objects with unique heroes, I'm using reactjs as my JavaScript framework, how can I do that?

Possible duplicate of [Remove duplicate values from JS array](https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array) — Just code, Mar 13 '19 at 04:21

score 3 · Accepted Answer · answered Mar 13 '19 at 08:36

Here is a solution by using reduce and find.

const removeDuplicateByKey = (arr, key) => {
  return arr.reduce((acc, val) => {
    //Found duplicate value
    if (acc.find(el => el[key] === val[key])) {
      return [...acc];
    }
    return [...acc, val];
  }, []);
};

I have also created a demo check it out.

Maheer Ali · Answer 2 · 2019-03-13T04:30:39.667

You can do that using Array.prototype.reduce() and Array.prototype.find() in following steps:

Apply reduce() on arr and set ac initially to [].
Inside reduce() check if ac have any obj whose hero is equal to current object.
If yes then return ac.
If no then return ac along with new item.

var arr = [ { username: 'Goku', hero: 'superman', power: 'laser', isMasked: false }, { username: 'Gohan', hero: 'batman', power: 'brain', isMasked: true }, { username: 'Goten', hero: 'cyclops', power: 'laser', isMasked: true }, { username: 'picollo', hero: 'superman', power: 'streangth', isMasked: false }, { username: 'bulma', hero: 'batman', power: 'rich', isMasked: true }, { username: 'brolly', hero: 'jin', power: 'laser', isMasked: false } ];

let res = arr.reduce((ac,a) => ac.find(x=> x.hero === a.hero) ? [...ac] : [...ac,a],[]);
console.log(res);

score 0 · Answer 3 · edited Mar 13 '19 at 05:42

You can do this with Array#reduce. Push the object to a new Array if the hero value does not exist.

var arr = [ { username: 'Goku', hero: 'superman', power: 'laser', isMasked: false }, { username: 'Gohan', hero: 'batman', power: 'brain', isMasked: true }, { username: 'Goten', hero: 'cyclops', power: 'laser', isMasked: true }, { username: 'picollo', hero: 'superman', power: 'streangth', isMasked: false }, { username: 'bulma', hero: 'batman', power: 'rich', isMasked: true }, { username: 'brolly', hero: 'jin', power: 'laser', isMasked: false } ];

var res = arr.reduce((a, b) => a.map(i => i.hero).indexOf(b.hero) > -1 ? [...a]:[...a,b], []);
console.log(res)

score 0 · Answer 4 · edited Mar 13 '19 at 08:18

0

You can use this below function as it work for me.

function removeDuplicateByKey(arr,key) {
  let uniqueObj = {};
  let filterArr = arr.filter(obj => {
    if (!uniqueObj[obj[key]]) {
      uniqueObj[obj[key]] = 1;
      return obj;
    }
  });
  return filterArr;
}

you can call this fun as removeDuplicateByKey(array,'hero')

edited Mar 13 '19 at 08:18

woyaru

5,544
13
54
92

answered Mar 13 '19 at 07:10

Tarun Jain

1
1

remove duplicate of specific value of object in array reactjs

4 Answers4