How to remove duplicates in array of objects in reactJs?

Question

I'm pushing on objects while clicking on button with Reactjs. Initially i'm having three type of objects like "LOCAL", "GLOBAL" and "MAIN". I'm passing these names as parameters in onclock callback. How to an avoid to insert duplicates with reactJs?

My render code,

<div>
   <input type="checkbox" onClick={this.checkedIn.bind(this, "LOCAL", "12")} />
   <button type="checkbox" onClick={this.checkedIn.bind(this, "GLOBAL", "15")} />
   <button type="checkbox" onClick={this.checkedIn.bind(this, "MAIN", "11")} />
  <button type="checkbox" onClick={this.checkedIn.bind(this, "MAIN", "13")} />
</div>

onclick event

var objectVale = [];
checkedIn(type, value) {
  objectVale.push({
    type:type,
    value:[value]
  })
}

Expecting output,

[
  {
    "type":"LOCAL",
    "value":[12]
  },
  {
    "type":"GLOBAL",
    "value":[15]
  },
  {
    "type":"MAIN",
    "value":[11, 13]
  }
]

Christos · Accepted Answer · 2016-12-30 09:47:51Z

1

You could try something like this:

var objectVale = [];
checkedIn(type, value) {

    var index = objectValue.findIndex(function(obj){ return obj.type === type; });
    if(index === -1){ // Object with the specific type not found.
        objectValue.push({
            type:type,
            value:[value]
        })
    } else { // Object with the specific type found. So push only the value.
        objectValue[index].value.push(value)
    }
}

edited Dec 30, 2016 at 9:47

answered Dec 30, 2016 at 9:42

Christos

54.1k9 gold badges82 silver badges114 bronze badges

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

3 Comments

Rajesh Dixit Over a year ago

Also I'd suggest using .find. This way you will not have to fetch object using index.

Christos Over a year ago

@Rajesh I would say that both ways are valid.

Sathya Over a year ago

Also, if i uncheck that checkbox, the unchecked checked should be removed. I tried this way, var mainValues = []; mainValues.push(value); var sameValueIndex = mainValues.indexOf(value); mainValues.splice(sameValueIndex, 1); But its not giving correct result

Rajesh Dixit · Accepted Answer · 2016-12-30 09:39:12Z

1

Issue is you are pushing value for every click event. Instead, first lookup array and find the necessary object using type and then push value to this object's value array.

var o = objectVale.find(function(x) {
  return x.type === type;
})

if (o) {
  o.value = o.value || [];
  o.value.push(value);
} else {
  objectVale.push({
    type: type,
    value: [value]
  })
}

answered Dec 30, 2016 at 9:39

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

Collectives™ on Stack Overflow

How to remove duplicates in array of objects in reactJs?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related