CODEWITHSUNDEEP
jquerydrop-down-menufilter
user1898629
user1898629

Reputation: 349

Filter unique array items into select list

I have done some research online and have found similar posts, but none dealing with select lists. I thought my solutions would solved the problem but I have failed on a few attempts. I have a JSON object stored in local storage. Data is: 

Contract Id    Contract Number
     4              232-JV-09
     4              232-JV-09
     5              871-PS-03
     7              008-IK-44
     7              008-IK-44
     7              008-IK-44
     9              101-LL-39

I am trying to see one of each contract id/contract number in my select list. My code is as follows (includes a failed attempt);

function PreFetchSurveyContracts() {

    var preFetchSurveyData = JSON.parse(window.localStorage.getItem("preFetchSurveyData"));
    $("#prefetch_contract_numbers").append($('<option value="-1"></option>'));

    var fieldArrayIds = [];
    var fieldArrayNums = [];

    $.each(preFetchSurveyData, function(index,item) {
        if ($.inArray(item.CONTRACT_NUMBER,fieldArrayNums) === -1) {
            fieldArrayIds.push(item.CONTRACT_NUMBER);
            fieldArrayNums.push(item.SURVEY_CONTRACT_ID);
            //fieldArrayIDs[item.SURVEY_CONTRACT_ID] = item.SURVEY_CONTRACT_ID;
            $("#prefetch_contract_numbers").append($('<option value="' + fieldArrayIds[index]/*item.SURVEY_CONTRACT_ID*/+ '">' + fieldArrayNums[index]/*item.CONTRACT_NUMBER*/ + '</option>'));
        }
    });
}

This doesn't work, but it was the last try I attempted. It seems to be splitting them by each character. And plus I may not even need two separate arrays for these either. Sigh, I'm just a tad bit frustrated at this point. Any help on this topic would be greatly appreciated. Thanks in advance.

Upvotes: 0

Views: 87

Answers (2)

Gregg Duncan
Gregg Duncan

Reputation: 2725

See this fiddle: http://jsfiddle.net/b8v9m4yy/

var preFetchSurveyData = [{"ContractID": 4,"ContractNumber": "232-JV-09"},{"ContractID": 4,"ContractNumber": "232-JV-09"},{"ContractID": 5,"ContractNumber": "871-PS-03"},{"ContractID": 7,"ContractNumber": "008-IK-44"},{"ContractID": 7,"ContractNumber": "008-IK-44"},{"ContractID": 7,"ContractNumber": "008-IK-44"},{"ContractID": 9,"ContractNumber": "101-LL-39"}]

// create 2 array variables. 1 to hold the unique objects
// one to hold just the contract ids
var unique = [];
var ids = []
$.each(preFetchSurveyData, function(idx, item){

    // check to see if contract ID already exists in array
    if($.inArray(item.ContractID, ids) === -1){ 

        // if doesn't already exist add the item to the unique array
        // and the ContractID to the ids array
        unique.push(item);
        ids.push(item.ContractID);
    }
});

$("#prefetch_contract_numbers").append($('<option value="-1">- Select -</option>'));

// loop through the unique items and add them to the select
$.each(unique, function(idx, item){
    $("#prefetch_contract_numbers").append($('<option value="' + item.ContractID + '">' + item.ContractNumber + '</option>'));
});

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8868

Provided you are able to pull a valid JsonString from the local source, you may do the following : 

<select id="prefetch_contract_numbers">
</select>

var jsonObj = '[{"Contract_Id":"4","Contract_Number":"232-JV-09"},            {"Contract_Id":"5","Contract_Number":"232-AJ-09"},              {"Contract_Id":"6","Contract_Number":"232-DY-11"}]';
var ConvertedArrayObj = $.parseJSON(jsonObj);

$.each(ConvertedArrayObj,function(i)
{
    $("#prefetch_contract_numbers").append("<option value='" + ConvertedArrayObj[i]["Contract_Id"] + "'>" + ConvertedArrayObj[i]["Contract_Number"] + "</option>");

});

http://jsfiddle.net/ghjhjz03/

Update : To avoid duplicates

$.each(ConvertedArrayObj,function(i)
{
    var key = ConvertedArrayObj[i]["Contract_Id"];
    var value = ConvertedArrayObj[i]["Contract_Number"];
    if($("#prefetch_contract_numbers option[value='" + key + "']").length === 0)
      $("#prefetch_contract_numbers").append("<option value='" + key + "'>" + value + "</option>");    
});

http://jsfiddle.net/ghjhjz03/1/

Upvotes: 1

Related Questions