Populating dropdown menu with JSON Data

Question

I'm tyring to use AJAX to populate a dropdown box based on the selection of another dropdown. I followed a tutorial using jQuery located here - http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ and have altered the select box ID names in the select box names in the script.

When there's a change to the value of the main checkbox the ajax is sent and returns as below:

{
  "1": "Kieran Hutchinson",
  "2": "Caleb Tan",
  "3": ""
}

THis is slightly different to the JSON string that is returned in the tutorials code which looks like this

[{
  optionValue: 10,
  optionDisplay: 'Remy'
}, {
  optionValue: 11,
  optionDisplay: 'Arif'
}, {
  optionValue: 12,
  optionDisplay: 'JC'
}]

I'm thinking this is the issue but I have no idea how to get the correct values out of my JSON response.

The javascript is as below:

$(function() {
  $("select#ContactCompanyId").change(function() {
    $.getJSON("contactList", {
      id: $(this).val(),
      ajax: 'true'
    }, function(j) {
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#QuoteContactId").html(options);
    })
  })
})

Thanks in advance

Solution 1

Your problem is this line:

options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';

is expecting data sent in the format of the tutorial. Yours is a different format. Try:

options += '<option value="' + i + '">' + j[i] + '</option>';

You have the 'value' as just an index -- i, and the value as the value with that key, j[i]. so the option tag you'd end up with would look like this:

<option value="1">Kieran Hutchinson</option>

To explain more: the original data was in format like this:

// The tutorial data
array[0]['optionValue'] = 10;
array[0]['optionDisplay'] = 'Remy';

// Your data
array[1] = 'Kieran Hutchinson';

also, if that was actual data returned in your example, your iterator for (var i = 0; i < j.length; i++) will fail because you aren't starting at an index of 0. Use for(i in j) { ... }

Solution 2

Since JSON can be considered as associative array also, you may do smth like this:

$(function(){
        $("select#ContactCompanyId").change(function(){
          $.getJSON("contactList",{id: $(this).val(), ajax: 'true'}, function(j){
            var options = '';
            for (key in j) {
                options += '<option value="' + key + '">' + j[key]+ '</option>';
            }
            $("select#QuoteContactId").html(options);
            })
        })
})  

More info about JSON can be found in this article - "Mastering JSON"

Solution 3

If an array does not start with a 0 index, it is converted into a JSON Object with keys and values instead of an Array. Just use $.each to loop through, grabbing the key (i.e. 1) and the value (i.e. Kieran Hutchinson):

$(function(){
  $("select#ContactCompanyId").change(function(){
    $.getJSON("contactList",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      $.each(j, function(key, value){
        options += '<option value="' + key + '">' + value + '</option>';
      })
      $("select#QuoteContactId").html(options);
    })
  })
})