Frustrated with Json Response

So here is my problem. I’m using Jquery’s $.ajax to pass back a series of values to a web method. The web method takes the values, creates an object and then sends it back as json to the calling page. Once I get the response back I am unable to access the response and display it’s values.

Can anyone explain what I need to do to make this work?

The jquery script:

$(document).ready(function() {
    $("#create").click(function() {
        var name = $('#name').val();
        var company = $('#company').val();
        var location = $('#location').val();
        var phonenumber = $('#phonenumber').val();
        var country = $('#country').val();

        $.ajax({
            type: "POST",
            url: "WebService.asmx/MakeEmployee",
            data: "{name:'" + name +
                          "',company:'" + company +
                          "',location:'" + location +
                          "',phonenumber:'" + phonenumber +
                          "',country:'" + country +
                          "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                AjaxSucceeded(msg.d);
            }
        });
    });

    function AjaxSucceeded(data) {
        //var item = jQuery.parseJSON(data) // this doesn't work for me.
        $("#response").html(
            "<ul><li> " + data.Name +
            "</li><li> " + data.Company +
            "</li><li> " + data.Address +
            "</li><li> " + data.Phone +
            "</li><li> " + data.Country +
            "</ul> "
            );
        };
  });

The web method:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string MakeEmployee(string name, string company, 
              string location, string phoneNumber, string country)
{
    Employee e = new Employee(name, company, location, phoneNumber, country);
    return new JavaScriptSerializer().Serialize(e);
}

And the response that I’m getting back:

{"d":""Name":"bob",
          "Company":"google",
          "Address":"home",
          "Phone":"123",
          "Country":"usa"}"}

This is what I think I should be getting back:

{"Name":"bob",
     "Company":"google",
      "Address":"home",
      "Phone":"123",
      "Country":"usa"}

The error I get once the pages renders again is this:

•undefined
•undefined
•undefined
•undefined
•undefined

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Your response will already be parsed as JSON, so it’s already an object…no need to parse it again just use it directly, like this:

function AjaxSucceeded(data) {
    $("#response").html(
        "<ul><li> " + data.Name +
        "</li><li> " + data.Company +
        "</li><li> " + data.Address +
        "</li><li> " + data.Phone +
        "</li><li> " + data.Country +
        "</ul> "
    );
}

The { d: ... } wrapper is added by ASP.Net, that’s normal behavior. After that your issue is the element not returned correctly, you need to return an object not a string from ASP.Net, preferably this:

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Employee MakeEmployee(string name, string company, 
  string location, string phoneNumber, string country) {
    return new Employee(name, company, location, phoneNumber, country);
}

…where Employee has the properties you want on the JavaScript side. Let ASP.Net handle the serialization here instead of doing it directly, you’ll get a cleaner response overall.

Method 2

Try using this ajax initaliazer function for asp.net ajax. It sets most defaults so you only have to supply url/params
Just call in your document.ready() function first, and then your calls.

function jqueryInit() {
$.ajaxSetup({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    data: "{}",
    dataFilter: function (data) {
        var msg;
        if (typeof (JSON) !== 'undefined' &&
                typeof (JSON.parse) === 'function')
            msg = JSON.parse(data);
        else
            msg = eval('(' + data + ')');

        if (msg.hasOwnProperty('d'))
            return msg.d;
        else
            return msg;
    }
});

}

Method 3

Start by cleaning your service method. You really don’t need this constructor and all those properties. You already have an Employee type, so use it:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Employee MakeEmployee(Employee e)
{
    // Maybe do something more useful here with this employee
    // like raise his salary
    return e;
}

And then clean your javascript:

$.ajax({
    type: 'POST',
    url: 'WebService.asmx/MakeEmployee',
    data: JSON.stringify({
        // All those correspond to Employee properties you would like to pass
        Name: $('#name').val(),
        Company: $('#company').val(),
        Location: $('#location').val(),
        PhoneNumber: $('#phonenumber').val(),
        Country: $('#country').val()
    }),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(msg) {
        // msg.d is gonna be the returned employee
        AjaxSucceeded(msg.d);
    }
});

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0