Populating select list with JSON array

Question

So I have some less than desireable JSON being returned from a web service and it goes a little somethin like this (please excuse the '?' characters):

{
    "d": [
      "AI,Appenzell Innerrhoden ", 
      "AR,Appenzell Ausserrhoden ", 
      "BE,Bern ", 
      "BL,Basel", 
      "BS,Basel", 
      "FR,Fribourg ", 
      "GE,Gen�ve ", 
      "GL,Glarus ", 
      "GR,Graub�nden ", 
      "JU,Jura ", 
      "LU,Luzern ", 
      "NE,Neuch�tel ", 
      "NW,Nidwalden ", 
      "OW,Obwalden ", 
      "SG,Sankt Gallen ", 
      "SH,Schaffhausen ", 
      "SO,Solothurn ", 
      "SZ,Schwyz ", 
      "TG,Thurgau ", 
      "TI,Ticino ", 
      "UR,Uri ", 
      "VD,Vaud ", 
      "VS,Valais ", 
      "ZG,Zug ", 
      "ZH,Z�rich "
    ]
}

I'm trying to populate a select list ('#state') but I keep getting 'undefined' Here's the ajax call - issue in success function:

var country = {};
country.request=$('#country').val();
$.ajax({
        type: 'POST',
        url: 'webserviceURL',
        crossDomain: true,
        data: JSON.stringify(country),
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        success: function(data){
          var toAppend = '';
           $.each(data.d,function(i,o){
            toAppend += '<option>'+o.id+'</option>';
          });
         $('#state').append(toAppend);
        },
        error: function (xhr, errorType, exception) {
            var errorMessage = exception || xhr.statusText;

            alert(errorMessage);
        }
    });
});

UPDATE: Reflecting first comment, now displays 'undefined' but has the correct number of 'undefined's'

UPDATE 2: I need the formatting to be<option value="AI">Appenzell Innerrhoden</option>

@BatScream it is returning 'undefined' for each item, although it is shoing the correct number of 'undefined' — Dirty Bird Design
– Dirty Bird Design, Commented Nov 5, 2014 at 1:19
Man that's close. Probably my fault for not being clear enough. I need the 'AI' to be the option value and the 'Appenzell Innerrhoden' to be the option text. So it needs to be <option value="AI">Appenzell Innerhoden</option> — Dirty Bird Design
– Dirty Bird Design, Commented Nov 5, 2014 at 1:27
o.split(",")[0] will give you AI, and o.split(",")[1] will give you Appenzell Innerhoden. — BatScream
– BatScream, Commented Nov 5, 2014 at 1:29

BatScream · Accepted Answer · 2014-11-05 02:43:34Z

1

You could modify your $each function parameter as below:

$.each(data.d,function(i,o){
var id = o.split(",")[0];
var value = o.split(",")[1];
toAppend += "<option value="+id+">"+value+"</option>";
});

The problem with your code was, you were accessing the JSON object rather than the d key inside it.

answered Nov 5, 2014 at 2:43

BatScream

19.7k4 gold badges54 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dirty Bird Design Over a year ago

I like that, is there any benefit to doing each key in a var, as opposed to doing it in the toAppend function?

BatScream Over a year ago

It depends upon the developers. Some follow it as a good programming practice. It becomes easy to read and maintain the code, that way.

PeterKA · Accepted Answer · 2014-11-05 01:36:29Z

1

Please change:

toAppend += '<option>'+o.id+'</option>';

To:

toAppend += '<option value="' + o.split(',')[0] + '">' + o.split(',')[1] + '</option>';

answered Nov 5, 2014 at 1:36

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

1 Comment

Dirty Bird Design Over a year ago

Yup thats exactly what @BatScream had in his comment. Works.

Collectives™ on Stack Overflow

Populating select list with JSON array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related