Populate dropdown with json data

Question

I am trying to populate a dropdownbox with data from a JSON page.

Here is the code I am using:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $.ajax({
            url: "json/wcf.svc/GetTax",
            dataType: 'json',
            data: data
        });

        $($.parseJSON(data.msg)).map(function () {
            return $('<option>').val(this.value).text(this.label);
        }).appendTo('#taxList');
    });
</script>

And here is what the json data returns:

{"d":"{\"16\":\"hello\",\"17\":\"world\"}"}

I am getting an error that "data is undefined." Do I have to somehow tell JQ how to read the json data?

Answer 1

Firstly, the data variable you are passing to the ajax call is not defined (well, not in the code sample you provided), and secondly the ajax call is happening asynchornously, so you need to do something with the returned data, i.e. via a success callback. Example:

$(document).ready(function () {
    var data = //define here
    $.ajax({
        url: "json/wcf.svc/GetTax",
        dataType: 'json',
        data: data, // pass it in here
        success: function(data)
        {
            $(data.msg).map(function () {
                return $('<option>').val(this.value).text(this.label);
            }).appendTo('#taxList');
        }
    });       
});

also you shouldn't need to parse the data returned from the ajax call, as jQuery will automatically parse the JSON for you, ( should need the $.parseJSON(data.msg))

EDIT

Based on the interesting format of the JSON, and assuming that it cannot be changed, this should work (ugly though)

$(document).ready(function () {
        var data = //define here
        $.ajax({
            url: "json/wcf.svc/GetTax",
            dataType: 'json',
            data: data, // pass it in here
            success: function(data)
            {
                 data = data.d.replace(/{/g, '').replace(/}/g, '').split(',');
                 var obj = [];
                 for (var i = 0; i < data.length; i++) {
                     obj[i] = {
                      value: data[i].split(':')[0].replace(/"/g, '').replace('\\', ''),
                      label: data[i].split(':')[1].replace(/"/g, '')
                     };
                 }
                 var htmlToAppend = "";
                 for (var j = 0; j < obj.length; j++) {
                     htmlToAppend += '<option value="' +
                         obj[j].value +
                         '">' + obj[j].label +
                         '</option>';
                 }
                 $('#taxList').append(htmlToAppend);
            }
        });       
    });

Answer 2

You need to use the success option to return the data.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $.ajax({
            url: "json/wcf.svc/GetTax",
            dataType: 'json',
            success: function(data){

           $(data.msg).map(function () {
            return $('<option>').val(this.value).text(this.label);
        }).appendTo('#taxList');

        }
        });


    });
</script>