Whats wrong with this function? .each related

Question

When I uncomment the alert the data is there... like:

{ 
      'Huishoudelijke hulp': 'Huishoudelijke hulp', 
      'Verpleging thuis': 'Verpleging thuis',
      'Verzorging thuis': 'Verzorging thuis',
      '24 uurs zorg': '24 uurs zorg',
      'Ondersteunende begeleiding': 'Ondersteunende begeleiding',
    }   

But instead of populating the key and the value it takes the whole var and start to create a key and value pair for each character.

You can see this in action here: http://www.zorgzuster-zeeland.nl/site/static/calendar_test.php

create a task in the calendar and then try to edit the task by clicking on it. It should populate the dropdown field properly.

When i create a static var with the same values the dropdown works.

static variable

var zvmlist = { 
      'Huishoudelijke hulp': 'Huishoudelijke hulp', 
      'Verpleging thuis': 'Verpleging thuis',
      'Verzorging thuis': 'Verzorging thuis',
      '24 uurs zorg': '24 uurs zorg',
      'Ondersteunende begeleiding': 'Ondersteunende begeleiding',
    }; 

This is my function, anybody has a clue?

$.get('get_zorgvormen.php', function(zvmlist) {
        //alert("Data Loaded: " + zvmlist);

            $.each(zvmlist, function(key, value) { 
              var selected='';
              if(key==eventdata.title){var selected='selected' }
              $('<option value="'+key+'" '+selected+'>'+value+'</option>').appendTo($('#calendar_edit_entry_form_title')); 

            }); 

        }); 

Answer 1

Your server responds with Content-Type: text/html instead of application/json, so jQuery doesn't eval your object. You could specify the content type:

$.get('get_zorgvormen.php', function(zvmlist) {
    $.each(zvmlist, function(key, value) { 
        var selected = '';
        if(key==eventdata.title) { 
            selected = 'selected';
        }
        $('<option value="'+key+'" '+selected+'>'+value+'</option>')
            .appendTo($('#calendar_edit_entry_form_title')); 
   }); 
}, 'json'); 

But I would recommend you to fix your server side script to send the correct content-type and jquery will automatically recognize the json format and eval the response of the server.

Answer 2

You dont tell Jquery to expect a json format.

From the documentation:

jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] )

urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

callback(data, textStatus, XMLHttpRequest)A callback function that is executed if the request succeeds.

dataTypeThe type of data expected from the server.

source

Try to specify that you expect Json:

$.get('get_zorgvormen.php', function(zvmlist) {
        //alert("Data Loaded: " + zvmlist);

            $.each(zvmlist, function(key, value) { 
              var selected='';
              if(key==eventdata.title){var selected='selected' }
              $('<option value="'+key+'" '+selected+'>'+value+'</option>').appendTo($('#calendar_edit_entry_form_title')); 

            }); 

        }, 'json');

Answer 3

try this:

$.ajax({
    "url":"get_zorgvormen.php",
    "dataType":"json",
    "type":"get",
    "success":function(zvmlist){
        // should alert [Object object] or something similar
        alert(zvmlist);
    },
    "error":function(msg){
        alert(msg);
    }
});

Answer 4

David Murdock provided "the trick". This is how my function looks now, and its working like a charm.

$.ajax({
        "url":"get_zorgvormen.php",
        "dataType":"json",
        "type":"get",
        "success":function(zvmlist){

            $.each(zvmlist, function(key, value) { 
              var selected='';
              if(key==eventdata.title){selected='selected' }
              $('<option value="'+key+'" '+selected+'>'+value+'</option>').appendTo($('#calendar_edit_entry_form_title')); 

            });
        },
        "error":function(msg){
            alert(msg);
        }
    });