How to remove duplicate values from dynamic select in Javascript?

Question

trying to figure this out with no such luck. Basically we populating a select with values from the service that it's being retrieved from. But there are duplicates in the select. Here's the code that's doing it. I'd like to remove the duplicates from what's getting returned that are in the "theProduct.name". I know this question has been asked before but I can't figure this out. The image attached is the select where it's happening. Thanks

 function populateSearchProducts(data) {

    var theData = data.data.results;
     $field.empty().append('<option value="">&nbsp;</option>');

    for (var p in theData) {
      var theProduct = theData[p];
      $field.append('<option value="'+theProduct.id+'">'+theProduct.name+'</option>');
    }
 }

It would be better if you can remove the duplicates before you call the function populateSearchProducts(). Basically data should be free of duplicates before you pass it in. — dokgu
– dokgu, Commented Jan 15, 2018 at 20:50
Inside your for loop, add another variable, call it oldVar. Assign your old product to it. Compare your new product with the old one using an if statement. Then inside your if statement, it should add the product if it will not match the old product. — Tibs
– Tibs, Commented Jan 15, 2018 at 20:58
@erics15 so if they have different id what are you supposed to use as the value when you output the option element? — dokgu
– dokgu, Commented Jan 15, 2018 at 21:17

T.Liu · Accepted Answer · 2018-01-15 20:58:43Z

3

Try a filter to remove duplicates from the input data:

function populateSearchProducts(data) {

    var theData = data.data.results.filter(function(item, pos, self) {
        return self.indexOf(item) == pos;
    });

    $field.empty().append('<option value="">&nbsp;</option>');

    for (var p in theData) {
      var theProduct = theData[p];
      $field.append('<option value="'+theProduct.id+'">'+theProduct.name+'</option>');
    }
}

answered Jan 15, 2018 at 20:58

T.Liu

5121 gold badge5 silver badges17 bronze badges

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

2 Comments

erics15 Over a year ago

thanks, i think the issue is that once you go into "theProduct.name", that's when you need to deduplicate. Tried the above and the same thing is happening

T.Liu Over a year ago

This is kinda a general solution to remove duplicates from an array in JavaScript. Not sure how your input data is.

Jonas Wilms · Accepted Answer · 2018-01-15 21:07:24Z

1

 function populateSearchProducts(data) {
     data = data.data.results;

     const dupes = new Set();

     for(const {name, id} of Object.values(data)){
          if(dupes.has(name)) continue;
          $field.append(`<option value='${id}' > ${name} </option>`);              
          dupes.add(name);
     }
 }

answered Jan 15, 2018 at 21:07

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

blurfus · Accepted Answer · 2018-01-15 21:50:34Z

1

You can keep track of the items already added to the DOM and then use a filter before adding new elements.

In the code below, the filter is looking at the id of each element to filter them out. If you want, you could use name (or any other attribute) to detect the duplicates and filter them out.

Something along the lines of:

var dataArray = [
  {id: 1, name: 'one'},
  {id: 2, name: 'two'},
  {id: 3, name: 'three'},
  {id: 4, name: 'four'},
  {id: 2, name: 'two'}, // dupe
  {id: 5, name: 'five'},
  {id: 3, name: 'three'} // dupe
]

function populateSearchProducts(data, $field) {
    //var theData = data.data.results;
    var theData = data;
    
    $field.empty().append('<option value="">&nbsp;</option>');
    // to keep track of the ones already in the drop-down
    var alreadyAdded = [];
    
    for (let p of theData) {
      if(alreadyAdded.filter( item => item.id === p.id ).length <= 0 ){
            $field.append('<option value="'+p.id+'">'+p.name+'</option>');
            alreadyAdded.push(p);
      }      
    }    
 }
 
 // when docuemnt ready, populate the field
 $(function(){
    var field = $("#selOptions");
    populateSearchProducts(dataArray, field);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selOptions" />

updated based on comments

edited Jan 15, 2018 at 21:50

answered Jan 15, 2018 at 21:23

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

3 Comments

dokgu Over a year ago

OP mentioned that the id of the duplicates are different.

blurfus Over a year ago

I saw that afterwards... I think we need more clarifications on what to filter one but the concept still applies... thanks @uom-pgregorio

dokgu Over a year ago

OP responded by saying just use the first one you encounter. Your solution should still work.

Collectives™ on Stack Overflow

How to remove duplicate values from dynamic select in Javascript?

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related