CODEWITHSUNDEEP
javascriptjqueryjsonajax
siya
siya

Reputation: 105

Getting repeated values inside dropdown

I am having a dropdown which is fetching values from json but as my json file having some repeated values so I want them only once ..before it was working fine as I was able to filter the values but when I included some more code it started again taking repeated values ..please have alook..Thank you.. $(document).ready(function() {

Variable usednames is filtering the values..

   $.ajax({
    url: "data.json,
    dataType: "json",
    success: function(obj) {
        var jsObject = obj;
        var usedNames = [];

        $('<option>', {
            text: 'Select your Option',
            value: '',
            selected: 'selected',
            disabled: 'disabled'
        }).appendTo('#dropdown1');

        $('<option>', {
            text: 'Select your List Option',
            value: '',
            selected: 'selected',
            disabled: 'disabled'
        }).appendTo('#checkbox');





        $.each(obj, function(key, value) {
            if (usedNames.indexOf(value.name) == -1) {
                $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                usedNames.push(value.name);
            }
            /*  $('<option>', {
                text: 'Select your Option',
                value: '',
                selected: 'selected',
                disabled: 'disabled'
            }).appendTo('#dropdown1');
            */

            $.each(usedNames, function(index, value) {
                $('<option>', {
                    text: value['name'],
                    value: index
                }).appendTo('#dropdown1');
            });

        /*    $('<option>', {
                text: 'Select your List Option',
                value: '',
                selected: 'selected',
                disabled: 'disabled'
            }).appendTo('#listbox');
            */



            $('#dropdown1').change(function() {
                $('#checkbox').empty();

                $('<option>', {
                  text: 'Select your List Option',
                    value: '',
                    selected: 'selected',
                    disabled: 'disabled'
                }).appendTo('#checkbox');

                var selection = $('#dropdown1 :selected').text();
                $.each(jsObject, function(index, value) {
                    if (value['name'] === selection) {
                        $('<option>', {
                            text: value['attr001'],
                            value: 'attr001'
                        }).appendTo('#checkbox');
                        $('<option>', {
                            text: value['attr002'],
                            value: 'attr002'
                        }).appendTo('#checkbox');
                        $('<option>', {
                            text: value['attr003'],
                            value: 'attr003'
                        }).appendTo('#checkbox');

My HTML file

  <form name="myform" id="myForm">

    <select id="dropdown1"></select>
     <!--  <select id="listbox"></select> -->
    <input type="checkbox">
    <br>

Upvotes: 1

Views: 117

Answers (2)

Keker
Keker

Reputation: 176

I think I see why. You have this code :

            if (usedNames.indexOf(value.name) == -1) {
                $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                usedNames.push(value.name);
            }

Which works (or should work) just fine. But after that, you have this :

            $.each(jsObject, function(index, value) {
                $('<option>', {
                    text: value['name'],
                    value: index
                }).appendTo('#dropdown1');
            });

By having a look at your code, it seems that jsObject is equal to obj. So, in the first part, you're indeed checking for repeated values, that you put in the array named usedNames.

But shortly after, you're appending jsObject to #dropdown1, so you're never using the array usedNames, which should only have unique values.

You should use usedNames after creating it, and forget about obj or jsObject, unless it caries some more information.

EDIT : Note that, when creating usedNames, you're also appending to your dropdown. So you're appending what will be the content of usedNames, and then appending jsObject.

Upvotes: 2

Oscar
Oscar

Reputation: 13980

You could fill a list of unique values before assigning it to the dropdown.

function unique(arr) {
var u = {}, a = [];
for(var i = 0, l = arr.length; i < l; ++i){
    if(!u.hasOwnProperty(arr[i])) {
        a.push(arr[i]);
        u[arr[i]] = 1;
    }
}
return a;

}

Most elegant way to create a list of unique items in JavaScript

Upvotes: 2

Related Questions