Getting repeated values inside dropdown

Question

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>

score 2 · Answer 1 · edited May 23 '17 at 11:59

2

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

edited May 23 '17 at 11:59

Community

1
1

answered Apr 08 '16 at 07:06

Oscar

13,594
8
47
75

score 2 · Accepted Answer · answered Apr 08 '16 at 07:13

2

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.

answered Apr 08 '16 at 07:13

Keker

176
11

Thank a lot ..worked now...bUt as I after ATTRIBUTE 1 in my dropdown i m getting watermarks of *SELECT YOUR OPTION* then after that my second value is coming why those watermarks are appearing of SELECT YOUR OPTION – siya Apr 08 '16 at 07:19
@siya You are appending this line just after creating `usedNames`. So for each object of `obj`, you're appending "SELECT YOUR OPTION". You should append this line before your `each` function. – Keker Apr 08 '16 at 07:51
Yeah solved now ..Just one more thing why In my second dropdown why I am getting values 3 times again and again as I scroll there is some space then again values start coming – siya Apr 08 '16 at 08:03
@siya I don't exactly see where this bug is, but I think it's from your last `each` function. For each item in `jsObject`, you're appending all of `jsObject` in `#listbox`. Try to delete this `each` function, or put it outside of your main `each`... Something like that. – Keker Apr 08 '16 at 08:13
OK..Thanks for ur suggestion .But I was wondering I used list box but my second values are coming inside a dropdown as I included only 1 dropdown in my page – siya Apr 08 '16 at 08:17
@siya You used a ` or ``, and append the same thing dynamically. – Keker Apr 08 '16 at 08:31
Sorry to ask again..But i included check box but nothing is shown inside in checkbox now... – siya Apr 08 '16 at 08:40
@siya Please, try to search a little on Internet :) If I understand your problem, what you're trying to do is create a list of checkboxes depending on informations of the selected element of the dropdown. What you should do is check the selected element of the dropdown and add a `` for each information of that element. If you're going to submit which checkboxes are checked, don't forget `name`and `value` attributes in your `input`. You can find how to do it by yourself now, I think :) – Keker Apr 08 '16 at 09:07

Getting repeated values inside dropdown

2 Answers2