How to remove duplicated before map

Question

[{
  "NS": "food",
  "Brand": "bosch",
  "legendKey": "5_1"
},
{
  "NS": "food",
  "Brand": "bosch",
  "legendKey": "5_1"
},
{
  "NS": "performance",
  "Brand": "ge",
  "legendKey": "4_2"
}]


<ul class="legend">Needstates
    {
    this.state.legend ? legend.map((ele, i) =>{
    return(
    <li>
    <span key={i} style={{backgroundColor:this.state.colors[ele['legendKey'][2]-1]}}></span> {ele['NS']}
    </li>
    )
    }
    ):
    null
    }
</ul>

Here i am trying to map above json in react.js. But some of them are duplicates As per NS key.

How can i map after removing duplicates.

PLease have a look

Possible duplicate of [Removing duplicate array values and then storing them \[react\]](https://stackoverflow.com/questions/37217953/removing-duplicate-array-values-and-then-storing-them-react) — roottraveller, Jun 19 '19 at 07:12

score 2 · Answer 1 · answered Jun 19 '19 at 07:17

Source: https://dev.to/vuevixens/removing-duplicates-in-an-array-of-objects-in-js-with-sets-3fep

var x = [
    {
      "NS": "food",
      "Brand": "bosch",
      "legendKey": "5_1"
    },
    {
      "NS": "food",
      "Brand": "bosch",
      "legendKey": "5_1"
    },
    {
      "NS": "performance",
      "Brand": "ge",
      "legendKey": "4_2"
    }
  ];

  var unique = Array.from(new Set(x.map(a => a.NS))).map(NS => x.find(a => a.NS === NS));

  console.log(unique)

score 0 · Answer 2 · answered Jun 19 '19 at 07:20

You can filter to get unique values and then render your data

<ul class="legend">Needstates
  {
    this.state.legend ? this.state.legend.filter((item , index, arr) => arr.findIndex(obj => obj.NS === item.NS) == index).map((ele, i) =>{
      return(
        <li>
          <span key={i} style={{backgroundColor:this.state.colors[ele['legendKey'][2]-1]}}></span> {ele['NS']}
        </li>
      )
    }): null
  }
</ul>

Sina · Answer 3 · 2019-06-19T07:44:13.423

Solution 1: You can alter keys variable to which properties must check for uniqueness.

const keys = ['NS', 'Brand', 'legendKey']
const filtered = this.state.legend.filter(
  (s => o => 
    (k => !s.has(k) && s.add(k))
    (keys.map(k => o[k]).join('|'))
  )
  (new Set)
);

console.log(filtered);

output:

[ { NS: 'food', Brand: 'bosch', legendKey: '5_1' }, { NS: 'performance', Brand: 'ge', legendKey: '4_2' } ]

Solution 2: You can use third party libraries like lodash which has functionalities like uniqWith.

Chris Ngo · Answer 4 · 2019-06-19T07:57:14.513

Let's call your original data json and your unique items, unique. We will check for duplicates by evaluating if Brand and NS have already been used.

    let json = [{
      "NS": "food",
      "Brand": "bosch",
      "legendKey": "5_1"
    },
    {
      "NS": "food",
      "Brand": "bosch",
      "legendKey": "5_1"
    },
    {
      "NS": "performance",
      "Brand": "ge",
      "legendKey": "4_2"
    }]
    
    let unique = []
    
    json.forEach((item) => {
     var i = unique.findIndex((uniqueItem) => {
      return uniqueItem.NS == item.NS && uniqueItem.Brand == item.Brand
     })
     if(i < 0){
      unique.push(item)
     }
    })
    
    console.log(unique)

Making it clean to follow what's going on.

We have an empty [] called unique to start with.
Then we iterate through json, for-each item, we will check inside unique to find the index of a matching uniqueItem, using NS and Brand as the parameters. Store that index in a variable called i.
If index is less than 0, therefore meaning no matching item was found, that means it must be the original/or at least first occurrence, so we push it to unique.
We continue to go through json, now if find a matching item, we will get an index of 0 or greater, which would mean its a duplicate, so we dont do anything with it.

score 0 · Answer 5 · answered Jun 19 '19 at 08:12

Simple example :

    let things= [{
          "NS": "food",
          "Brand": "bosch",
          "legendKey": "5_1"
        },
        {
          "NS": "food",
          "Brand": "bosch",
          "legendKey": "5_1"
        },
        {
          "NS": "performance",
          "Brand": "ge",
          "legendKey": "4_2"
        }];
    
  let result =  [...new Set(things.map(s => JSON.stringify(s)))].map(s => JSON.parse(s));
console.log(result)

How to remove duplicated before map

5 Answers5