How to remove duplicate values from a list drop-down separately

Question

I am using below JS code to show certain choices in a Company drop-down based on Project Name passed in loadcompanies function for example in below case: Rahway DMV. There is a company list from where project name and company values are coming and using below code I am just filtering/hiding company column values based on project name passed in the loadcompanies function. it works great, the only issue is it shows me duplicate values and which is because of the company list.

<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

  loadCompanies('Rahway DMV');

});

//Function to filter the values of Drink Types
function loadCompanies(projectName) {
    var masterListName = "Company Entity List";
    var listurl = "https://****.sharepoint.com";
    var masterListURL = listurl + "/_api/web/lists/getbytitle('" + masterListName + "')/items?$select=ID,Company,Company/Title,Company/Id&Expand=Company&$filter=Title eq '" + projectName + "'";
    getReqData(masterListURL, function (data) {
        var items = data.d.results;
        if (items.length > 0) {
        $(":input[title='Company']").children("option").hide();
            var optionsAsString = '<option value=""></option>';
            for (var i = 0; i < items.length; i++) {        
                optionsAsString += "<option value='" + items[i].id + "'>" + items[i].Company + "</option>";     
        $(":input[title='Company']").children("option[value='" + items[i].ID + "']").show();

            }            
        }
    },
        function (data) {
            alert("Some error occurred in retrieving companies");
        });
}

//JQuery AJAX to access REST API JSON data
function getReqData(reqUrl, success, failure) {
    $.ajax({
        url: reqUrl,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            success(data);
        },
        error: function (data) {
            failure(data);
        }
    });
}
</script>

Can someone help me with code for removing duplicate values from Company drop-down post filtering based on given project name: Rahway DMV? I would like that code to execute once irrelevant choices are hidden based on the Project name passed, so that way it would remove duplicate values for that project name only like Rahway DMV. Thanks in advance.

Answer 1

there's a couple quick ways to filter which just adds a new line of code. So assuming its var items = data.d.results; that holds your names and items is a simple array...

A. You could try putting the data you receive into an array then filtering with the Array.Filter() method:

    function onlyUnique(value, index, self) { 
        return self.indexOf(value) === index;
    }
    var items = items.filter( onlyUnique )

or

    var items = items.filter((v, i, a) => a.indexOf(v) === i); 

B. You could push the elements into a set, which only stores unique values:

    let items = [...new Set(items)];

C. Using jquery you can use the $.unique() method:

     items = $.unique(items);

According to this site $.unique() is depreciated, but it's replacement of $.uniqueSort() doesn't work for my chrome browser. Up to you.

All of these should work... The first two methods I got this answer, the third method was from inside the "onsuccess" function of this answer.

EDIT: This may work with your current solution. Replace the for loop after optionsAsString with the following:

var Companies = new Set();
for (var i = 0; i < items.length; i++) {
    if(!Companies.has(items[i].Company)){
        Companies.add(items[i].Company)
        optionsAsString += "<option value='" + items[i].id + "'>" + items[i].Company + "</option>";
        $(":input[title='Company']").children("option[value='" + items[i].ID + "']").show();
    }
}