Parsing JSON in JavaScript

There are times when your web services are not returned as pure JSON objects but rather the string representations of JSON. So we will have to parse JSON string to JSON object.

Let us consider we have the following class and a WebMethod as follows.

public class Person
{
  public string FirstName;
  public string LastName;
}

[WebMethod]
[ScriptMethod]
public string GetSamplePerson() {
  Person p = new Person();
  p.FirstName = "Prabir";
  p.LastName = "Shrestha";
  return Newtonsoft.Json.JsonConvert.SerializeObject(p); ;
}

I'm using a 3rd party open source JSON serializer which can be found at http://json.codeplex.com.

Under .NET 2.0 we would get the following result.

"{\"FirstName\":\"Prabir\",\"LastName\":\"Shrestha\"}"

Under .NET 3.5 we would get the following result.

{"d":"{\"FirstName\":\"Prabir\",\"LastName\":\"Shrestha\"}"}

Noticed any difference? The “d” is added in the .NET 3.5. This is due to security reasons (for more details please see here). It is also a breaking change from .NET 2.0 to .NET 3.5.

But before we go to the complex one, lets start with the easier version, .NET 2.0. As you have noticed .NET 2.0 gives a full plain string enclosed in double quotes.

So when we consume in the client side, we will need to convert the JSON text to the JSON object.

Before we begin let us assume we already have these variables which comes from the webservices as follows.

var net20ResultFromWebService = "{\"FirstName\":\"Prabir\",\"LastName\":\"Shrestha\"}";
var net35ResultFromWebService = { "d": "{\"FirstName\":\"Prabir\",\"LastName\":\"Shrestha\"}" };

We could use the browser's inbuilt JavaScript function called eval.

var net20JsonObjectUsingEval = eval('(' + net20ResultFromWebService + ')');

The eval function is very fast. However, it can compile and execute any JavaScript program, so there can be security issues. We will then be using json2.js, which can be found at http://www.json.org/js.html or can also be downloaded at the end of this post.

We could obtain the same result by using calling JSON.parse method which is in json2.js.

var net20JsonObjectUsingJson2 = JSON.parse(net20ResultFromWebService);

Now lets go to the .NET 3.5 version where d is added automatically. The result returned in .NET 3.5 is not totally a string. It is actually a JSON object. But the value of d is a string. So inorder to select the value and then convert it to the object we need to retrieve the value of d. This can be easily done by the following code.

var valueOfD = net35ResultFromWebService.d;

Then we parse the value of d by calling JSON.parse method.

var net35JsonObjectUsingJson2 = JSON.parse(valueOfD);

Now that it is done. But what if you are consuming others webservices, and all of a sudden they plan to upgrade to .NET 3.5 or higher and all of your websites doesn’t work. To avoid this lets create a generic version to parse.

function getMain(dObj) {
  if (dObj.hasOwnProperty('d'))
    return dObj.d;
  else
    return dObj;
}

The above code checks if it has a property called d. If it does have it return the value of d, else returns the object itself.

So now we call the above method instead.

var net20DHacked = JSON.parse(getMain(net20ResultFromWebService));
var net35DHacked = JSON.parse(getMain(net35ResultFromWebService));

That is it for converting Json text to Json Object. If you want to do the opposite from Json Object to Json text, just call the method JSON.stringify in json2.js.

Note: .NET 4.0 also adds ‘d’ property.

JsonParsing.zip (7.70 kb)