Javascript remove duplicates from dropdownlist

Question

I have javascript code that reads from an xml that contains a category node and populates a dropdown list with it. That category node is created every time the user creates a new product listing. However, this means that when the xml is read, the category is filled with items such as Camera, Camera, Camera, Others. How do I remove that or is there a distinct option?

function loadXMLcat()
{
var xmlhttp=false;
 if (window.XMLHttpRequest)
{
  xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","auction.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
var category;
var str;
var i;
var j;
str=("<p>Category : <select onchange=\"reveal(this)\" name=category>");
var x=xmlDoc.getElementsByTagName("Product");
if(x.length>0)
{
    for (i=0;i<x.length;i++)
    {
        category=xmlDoc.getElementsByTagName("Category");
        str+="<option value=" + category[i].childNodes[0].nodeValue + ">" + category[i].childNodes[0].nodeValue + "</option>"
        /**var arr = category;
        var sorted_arr = arr.sort()
        var results = [];
        for (var i = 0; i < arr.length - 1; i++) 
        {
            if (sorted_arr[i + 1] !== sorted_arr[i]) 
            {
                str+="<option value=" + arr[i] + ">" + arr[i] + "</option>"
                str+="<option value=" + sorted_arr[i] + ">" + sorted_arr[i] + "</option>"
            }
        }**/
    }
    str+="<option id=\"others\" value=\"Other\">Other</option>";
}
else
str+="<option id=\"others\" value=\"Other\">Other</option>";
str+=("</select></p>");
document.getElementById('category').innerHTML=str;
}

1st Put your options in an Array & remove duplicates from this array : See [Remove duplicates from javascript array](http://stackoverflow.com/questions/9229645/remove-duplicates-from-javascript-array) — Jonathan Larouche, May 19 '15 at 14:17
It seems to return repeated [object element] only and it says arr.sort isn't a function. — JianYA, May 19 '15 at 14:36

Jonathan Larouche · Accepted Answer · 2015-05-20T11:33:59.090

Here is the same loop with a check to see if the category was already added to the select box. I have also added the contains() function to quickly test the duplicates.

function loadXMLcat()
{
  var xmlhttp=false;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET","auction.xml",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML; 

  var str;
  var i;
  var j;
  str=("<p>Category : <select onchange=\"reveal(this)\" name=category>");
  var categoryList= []; //Array to contains the distinct values
  var x=xmlDoc.getElementsByTagName("Product");
  var categories = xmlDoc.getElementsByTagName("Category");
  if(x.length>0)
  {
    for (i=0;i<x.length;i++)
    {
        var category=categories[i].childNodes[0].nodeValue;
        var currentOption ="<option value=" + category + ">" + category  + "</option>";
        //Verify is category has already be added
        if(!contains(categoryList,category)){
            categoryList.push(category);
            str += currentOption;
        }
    }
    str+="<option id=\"others\" value=\"Other\">Other</option>";
  }
  else
    str+="<option id=\"others\" value=\"Other\">Other</option>";
  str+=("</select></p>");
  document.getElementById('category').innerHTML=str;
}

//Utility function to quickly verify if an array contains an element.
function contains(arr, x) {
    return arr.filter(function(elem) { return elem == x }).length > 0;
}

I've updated the answer, the category variable was't set correctly, only the first items would have been added. Can you retry this? — Jonathan Larouche, May 19 '15 at 23:12
It says cannot read property 0 of undefined at the var category line — JianYA, May 19 '15 at 23:20
I think I've found out why. I needed to add the getElementByTagName and add it to a variable. — JianYA, May 19 '15 at 23:33

Javascript remove duplicates from dropdownlist

1 Answers1