Remove Duplicates from a select list created from a json in the back

Question

Hi guys please some help, I have a json like that...

{
    Result: "OK", 
    Options: [
    {
        DisplayText: "Απρίλιος",
        Value: "4"
    },
    {
        DisplayText: "Απρίλιος",
        Value: "4"
    },
    {
        DisplayText: "Απρίλιος",
        Value: "5"
    },
    {
        DisplayText: "Απρίλιος",
        Value: "5"
    },
    {
        DisplayText: "Αύγουστος",
        Value: "10"
    },
    {
        DisplayText: "Αύγουστος",
        Value: "10"
    },
    {
        DisplayText: "Αύγουστος",
        Value: "11"
    },
    {
        DisplayText: "Αύγουστος",
        Value: "11"
    }// And so on
}
 ... an so on...

You will notice that I have duplicates in Value BUT also in DisplayText, i want to put in my select list only like that

Result: "OK", 
Options: [
            {
                DisplayText: "Απρίλιος",
                Value: "4"
            },
            {
                DisplayText: "Αύγουστος",
                Value: "10"
            },

That is, if the Value is the same with some other keep one, if the DisplayText is the same with some other keep one ,, DONT CARE about which Value i Keep...

the problem with the duplicates is appearring only in latest IE, in mozilla or chrome is fine no duplicates

so my code - function for the front is like that using inArray,, but this is when i have duplicates in DisplayText is not working cause is looking only the duplicates in Value

function loadDynamicDdl(ajaxUrl , ddlId) {
    $.ajax({
        dataType:'json',
        type: 'GET',
        url: ajaxUrl,
        cache:true,       
        async:false,
        success:function (response) {

            if (response.Result == 'ERROR') { 
                $('#system-message-container').html('<h2 style="color:red;">' + response.Message + '</h2>');
                $('#maincontent-container').hide();
            }

            var ddl = $('#' + ddlId);
            ddl.empty();            
            var opts = response.Options;         
            //Start checking for duplicates numbers in the Value field in json and remove them        
            var arr = [], //to collect number from Value field
            collection = []; //collect unique object from json
            $.each(opts, function (i, item) {
                if ($.inArray(item.Value, arr) == -1) { // it returns -1 when it doesn't find a match
                    arr.push(item.Value);//push id value in arr       
                    collection.push(item); //put object in collection to access it's all values       
                    ddl.append($("<option />").val(item.Value).text(item.DisplayText));
                }
            });
        }
    }
}

But this working only for duplicates in Value.... what about the duplicates in DisplayText ?? Please some help guys,, cause i m trying for ages to solve this with no luck,, and only in latest IE is showing the problem in mozilla or chrome no problem... but my client is working in IE :( , , , Thank you in advance guys..

Answer 1

You can use below code to remove from json array

function arrUnique(arr) {
    var cleaned = [];
    arr.forEach(function(itm) {
        var unique = true;
        cleaned.forEach(function(itm2) {
            if (_.isEqual(itm, itm2)) unique = false;
        });
        if (unique)  cleaned.push(itm);
    });
    return cleaned;
}

var jsonObj={
    Result: "OK",
    Options: [{
        DisplayText: "Απρίλιος",
        Value: "4"
    }, {
        DisplayText: "Απρίλιος",
        Value: "4"
    }, {
        DisplayText: "Απρίλιος",
        Value: "4"
    }, {
        DisplayText: "Απρίλιος",
        Value: "4"
    }, {
        DisplayText: "Αύγουστος",
        Value: "11"
    }, {
        DisplayText: "Αύγουστος",
        Value: "11"
    }, {
        DisplayText: "Αύγουστος",
        Value: "11"
    }, {
        DisplayText: "Αύγουστος",
        Value: "11"
    }]
};

jsonObj = arrUnique(jsnobject);

Answer 2

in case someone else need it and with the great help of u guys and especially 111 is this,

       var opts = response.Options;
       var finalResult = [];
       var Values =[];
       var DisplayTexts = [];
       $.each(opts, function (i, value) {
       if ($.inArray(value.DisplayText, DisplayTexts) == -1 && ($.inArray(value.Value, Values) == -1)) { // it returns -1 when it doesn't find a match
      Values.push(value.Value);//push id value in arr   
      DisplayTexts.push(value.DisplayText);
      finalResult.push(value);      
      ddl.append($("<option />").val(value.Value).text(value.DisplayText));
      }
      });

Answer 3

See this JSFiddle, I try with this solution:

var result ={ Result: "OK", 
           Options: [
              {
             DisplayText: "ABC",
             Value: "4"
             },
             {
             DisplayText: "ABC",
              Value: "4"
            },
             {
             DisplayText: "ABC",
             Value: "5"
             },
             {
             DisplayText: "ABC",
              Value: "5"
            },
             {
             DisplayText: "XYZ",
             Value: "10"
             },
             {
             DisplayText: "XYZ",
             Value: "10"
            },  
             {
             DisplayText: "XYZ",
             Value: "11"
             },
             {
             DisplayText: "XYZ",
             Value: "11"
            },  
               ]
};
var finalResult = [];
var Values =[];
var DisplayTexts = [];

$.each(result.Options, function(index, value) {
    if ($.inArray(value.DisplayText, DisplayTexts)==-1
        && $.inArray(value.Value, Values)==-1     ) {
         Values.push(value.Value);
         DisplayTexts.push(value.DisplayText);
         finalResult.push(value);
    }
});

console.log(finalResult);