jQuery and parsing JSON in the callback

Question

I'm using jQuery to call an asmx and return some data. I'm making the call like this

function getRequestInfo(event) {
        var id = $('#<%= RequestDaysId.ClientID %>').val();
        var formattedId = "{'id': '115'}";
        $.ajax({
            type: "Post",
            url: "services/VacationServices.asmx/GetVacationInfo",
            data: "{'id': '" + id + "'}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            processdata: true,
            success: function(data) {
                $('#<%=Note.ClientID %>').val(data.Note);
                $('.pendingrequestinfo').show().fadeIn(2000);
            },
            error: function(result, errortype, exceptionobject) {
                $('.failureMessage').fadeIn(2000).fadeOut(2000);
            }
        })
    };

Everything seems to be working fine, I set a break point in my success function and inspect the data object and see this.

"{"Note":"this is a note","dayInfo":[{"ShortDate":"3/4/2010","DayType":"Vacation","HalfDay":""},{"ShortDate":"3/5/2010","DayType":"Vacation","HalfDay":""}]}"

The problem comes when I try to get the values out of the JSON. If I do something like data.Note, I get undefined back.

It's late, It's Saturday and I've been at it all day, I sure would like a push in the right direction when it comes to parsing though my JSON.

EDIT: I'm using Asp.net and JavaScriptSerializer.Serialize() to create the JSON. When I set a break point and inspect the 'data' object it looks to have a property d that contains the string that should be JSON.

ANOTHER EDIT: If I do something like this in my success

$('#<%=Note.ClientID %>').val(data.d.[0]);

I get the { opening curly brace. I guess i'm getting a string instead of JSON, but it seems to go against what the jquery api states about the return value when the datatype is set to JSON.

Thanks guys. Jim

Answer 1

That's not a valid JSON format. Remove the doublequotes at beginning and end to make it fullworthy JSON.

Answer 2

First make sure that the JSON string exists in the "d" variable in the response returned in the success callback. Next, in order to get the JSON object you will need to convert the string into the JSON. You can use the eval function or the JQuery built in function to convert string to JSON. I like the jquery-json plug in to convert string into JSON representation.

Your code will look something like this:

var jsonObject = eval('(' + data.d + ')'); 

Now, you can use jsonObject.Note or any other property.

With jquery-json plugin you can do the following:

var note = $.evalJSON(data.d).Note;

Answer 3

This one is so silly...sorry guys. When returning data from the asmx there is no need to serialize it into JSON

I have the following class that I'm populating and returing from my web method

public class VacationInfo
    {
        public string Note { get; set; }
        public List<DayInfo> dayInfo { get; set; }
        public VacationInfo(string note, List<DayInfo> dayinfo)
        {
            this.Note = note;
            this.dayInfo = dayinfo;
        }

        public class DayInfo
        {
            public string ShortDate { get; set; }
            public string DayType { get; set; }
            public string HalfDay { get; set; }
            public DayInfo(string shortdate, string daytype, string halfday)
            {
                this.ShortDate = shortdate;
                this.DayType = daytype;
                this.HalfDay = halfday;
            }
        }
    }

as long as your web service is decorated with

     [System.Web.Script.Services.ScriptService]

your object will be serialized and returned as JSON at no charge to you. :)

then I'm able to do this

data.d.Note

in my call back.

Thanks for the help guys.

Credit where credit is due

Answer 4

Here is how I process. Note the dataFilter: part - this makes it work with either newer or older asp.net stuff.

$.ajax({ 
      type: "POST", 
     contentType: "application/json; charset=utf-8", 
       data: objectSaveData, 
       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; 
        }, 
       url: "/mywebservice.asmx/myMethodName",  
       success: function(msg) 
       { 
          //do stuff 
       }, 
        failure: function(msg) 
       { 
          //handlefail 
       } 
  });