Getting undefined in dropdown from json content

Question

EDIT 2

Check the fiddle - http://jsfiddle.net/SN5zT/2/

Following is the fiddle for which I am not sure why I am getting undefined in dropdown.

My fiddle - http://jsfiddle.net/z6GDj/

var res = '{"allSportPosition":{"25":"Forwards (Strickers)","27":"Fullbacks (Defenders)","28":"Goalkeeper ","26":"Midfielders"}}';


try {
    var sportPositionOptions = '';
    var parsedJson = JSON.parse(res);
    var allSportPosition = parsedJson.allSportPosition;
    var values = new Array();
    $.each(allSportPosition, function (index, value) {
        values[index] = value;
    });
    //alert(values.length);
    values.sort();
    $.each(values, function (atIndex, atValue) {
        sportPositionOptions = sportPositionOptions + '<option value="' + atIndex + '">' + atValue + '</option>';
    });
    $(sportPositionOptions).appendTo("#player");

} catch (e) {
    alert("Parsing error:" + e);
}

$.each is automatically sorting keys to 25,26,27,28 for res.

Please explain the reason of this and why I am getting undefined ?

Let me know If i need to explain it more, I will surely do it :)

EDIT

Please explain the reason why it is getting sorted automatically http://jsfiddle.net/SN5zT/

Answer 1

Try

values.push(value);

instead of

values[index] = value;

Fiddle Link

Answer 2

$.each is doing the following assignment that is why you are getting so many undefined

values[25] = "Forwards (Strickers)"
values[26] = "Midfielders"
values[27] = "Fullbacks (Defenders)"
values[28] = "Goalkeeper"

During $.each browsers will automatically sort the keys if the keys are integer, one way to avoid this is use non integer keys

Answer 3

Since you are passing an object to each(), jquery passes the key as the index parameter. In your object, the keys are ranged from 25 to 28. Setting the array using the values[25] on an empty array will expand the array to index 25, with the first 25 elements undefined. Using values.push(value) will append the value at the end of the array.

Answer 4

The following script is working, I also figured out where the "undefineds" came from.

http://jsfiddle.net/z6GDj/3/

var res = '{"allSportPosition":{"25":"Forwards (Strickers)","27":"Fullbacks (Defenders)","28":"Goalkeeper ","26":"Midfielders"}}';


try{
var sportPositionOptions = '';    
var parsedJson = JSON.parse(res);
var allSportPosition = parsedJson.allSportPosition;
var values = allSportPosition;
//$.each(allSportPosition, function(index, value) {
//    values[index] = value;
//});
//alert(values.length);

$.each(values,function(atIndex, atValue){       
    sportPositionOptions = sportPositionOptions+'<option value="'+atIndex+'">'+atValue+'</option>';            
});
$(sportPositionOptions).appendTo("#player");

}
catch(e){
    alert("Parsing error:"+ e); 
    }

The array is sorted automatically, because the keys are set correctly. see http://www.w3schools.com/js/js_obj_array.asp. "An array can hold many values under a single name, and you can access the values by referring to an index number."

Or: Change the index, and you´re changing the order. (index indicates the order).

The undefined values are created by javascript default, check the last answer in here (How to append something to an array?)

"Also note that you don't have to add in order and you can actually skip values, as in

myArray[myArray.length + 1000] = someValue;

In which case the values in between will have a value of undefined."

Answer 5

What you need to do is define your options before you sort them , and then append them to your select:

var res = '{"allSportPosition":{"25":"Forwards (Strickers)","27":"Fullbacks (Defenders)","28":"Goalkeeper ","26":"Midfielders"}}';


try {
    var sportPositionOptions = '',
        parsedJson = JSON.parse(res),
        allSportPosition = parsedJson.allSportPosition,
        options = new Array();

    $.each(allSportPosition, function (index, value) {
        options[index] = $('<option></option>', {
            value: index,
            text: value
        });
    });

    $.each(options, function (index) {
        $('#player').append(options[index]);
    });

} catch (e) {
    alert("Parsing error:" + e);
}

jsfiddle: http://jsfiddle.net/z6GDj/11/