Allowing only those items which have real numbers inside my list box

Question

I am having a dropdown and when i select item from dropdown my list box gets populated with set of items from json and some of items inside that list box are not having reak number value and I want only those items which have real numbers value ..below is my javascript.Please suggest

$(document).ready(function() {
    $.ajax({
        url: "avb.json",
        dataType: "json",
        success: function(obj) {
            console.log("obj--", obj)
            var jsObject = obj;
            var usedNames = [];
            $('<option>', {
                text: 'Select your Option',
                value: '',
                selected: 'selected',
                disabled: 'disabled',
                location: 'fixed'
            }).appendTo('#dropdown1')
            $.each(obj, function(key, value) {
                if (usedNames.indexOf(value.name) == -1) {

                    $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                    usedNames.push(value.name);
                }
            });
            $('#dropdown1').change(function() {
            if (!isNaN(this.value) ){
                $('#listbox').toggle(this.value != "");
                }
            });

            $('#dropdown1').change(function() {


                $('#listbox').empty();

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

                var selection = $('#dropdown1 :selected').text();
                console.log("as".selection);
                $.each(jsObject, function(index, value) {
                    console.log("%o",value)
                    if (value['name'] == selection) {
                        var optionHtml = '';
                        for (var i = 1; i <=20; i++) {

                            var attr = 'attr' + ('000' + i).substr(-3);
                            var val = 'val' + ('000' + i).substr(-3);

                            optionHtml += '<option value="' + attr + '" data-val="'+value[val]+'">' + value[attr] + '</option>';

                        }


                        $("#listbox").css("width", "500px")

                        $("#listbox").css("height", "300px")
                        $('#listbox').append(optionHtml);
                        return false;
                    }
                    var selectedOption = $(this).find('option:selected');
                    console.log(selectedOption);

                });

            });
            $("#listbox").on("click", function() {

                console.log("asd", $('#listbox option:selected').attr('data-val'));
                var zxv =  $('#listbox option:selected').attr('data-val')

                $(".bar").attr("y",zxv)
                console.log("test", $(".bar").attr("y",zxv))
            //   $(".bar").attr("height",'100')

            })
        }
    });
});

my json
[ {
 "name": "ABC",
 "date": 1459461600000, 
"attr001": "SIGN1",
 "val001": "60", 
"attr002": "SIGN2",
 "val002": "5",
 "attr003": "SIGN3", 
"val003": "100.00", 
"attr004": "SIGN4", 
"val004": "0",
"attr005": "SIGN5", 
"val005": "Traesnotfound" 
}, 
{
"name": "ABC",
 "date": 1461176704000,
 "attr001": "SIGN1",
 "val001": "200", 
"attr002": "SIGN2", 
"val002": "70", 
"attr003": "SIGN3", 
"val003": "100.00",
 "attr004": "SIGN4",
 "val004": "670",
 "attr005": "SIGN5", 
"val005": "Traceinvalid"
 }, 


 { "name": "XYZ", 
"date": 1459125900000, 
"attr001": "VISSE1",
 "val001": "100", 
"attr002": "VISSE2",
 "val002": "7",
 "attr003": "VISSE3",
 "val003": "300.00",
 "attr004": "VISSE4",
 "val004": "160",
 "attr005": "SIGN5", 
"val005": "not found"
 },

 { "name": "XYZ",
 "date": 1459461600000,
 "attr001": "VISSE1", 
"val001": "50", 
"attr002": "VISSE2",
 "val002": "70",
 "attr003": "VISSE3",
 "val003": "300.00",
 "attr004": "VISSE4",
 "val004": "230",
  "attr005": "SIGN5", 
"val005": "found"
 },

{ "name": "XYZ", 
"date": 1459461900000, 
"attr001": "VISSE1",
"val001": "300", 
"attr002": "VISSE2",
 "val002": "10", 
"attr003": "VISSE3", 
"val003": "500.00",
 "attr004": "VISSE4",
 "val004": "350",
 "attr005": "SIGN5", 
"val005": "not found" } ]

Do you see this coloration good? Please add quotes where needed so it can help future readers along with me — Salathiel Genese, Apr 27 '16 at 13:16
I told you what to do: edit your post & add the missing quotes — Salathiel Genese, Apr 27 '16 at 14:07

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

So you need a validation of your strings added to the control?

Try this one: Validate decimal numbers in JavaScript - IsNumeric()

edited May 23 '17 at 11:58

Community

1
1

answered Apr 27 '16 at 13:15

ahorak

123
8

My problem is I want to include all real numbers (which include decimals and integers) not other things...i didnt get what is going in this given link..please explain – sahil Apr 27 '16 at 13:22

Vijay Thorat · Answer 2 · 2016-04-28T13:03:21.697

You have to check value is number or not isNaN(value.name) this function will returns true if provided value is not number else false. Please look in isNaN() details this link for more details.

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

To remove non decimal values from option call bellow function

function removeNonNumberEmptyOptions(){
   for(var i=0; i< $("#dropdown1 option").length;i++){
      if (isNaN($("#dropdown1 option")[i].value)){
          $("#dropdown1 option[value=" 
                     +$("#dropdown1 option")[i].value + "]").remove()
      }
   }
}

Checkout https://fiddle.jshell.net/6b9ne2y0/6/ link its working as per your expectations

you ware doing hardcoding for for loop it should be

 userPorperties = Object.getOwnPropertyNames(value);
                for (var i = 0; i <= userPorperties.length -1; i++) {
                    if (!isNaN(value[userPorperties[i]]))
                      optionHtml += '<option value="' + userPorperties[i] + '"          
                      data-val="' + value[userPorperties[i]]  + '">' 
                      + userPorperties[i] + "=>" 
                      +value[userPorperties[i]]+ '</option>';

                }

.i have added the if statement above my list box but my list box still have the "sign5" item whose value is NAN not integer as u can see from json..why like this — sahil, Apr 27 '16 at 20:29
If you do isNaN("attr005") it returns true, you have to call $("#dropdown1 option[value=attr005]").remove(); iterate this for all items of list and your non number values get removed, try to add your code https://fiddle.jshell.net/ so i can look at it — Vijay Thorat, Apr 28 '16 at 06:15
https://fiddle.jshell.net/6b9ne2y0/2/ my fiddle but dont know how should i refer to my json so i put at last of my script ..please have a look — sahil, Apr 28 '16 at 08:01

Allowing only those items which have real numbers inside my list box

2 Answers2