JSON stands for "JavaScript Object Notation" and is a lightweight data-interchange
format. JSON is easy to generate and parse but also easily human-readable. JSON
has a number of advantages in the JavaScript/client environment:
- JSON can be used as an easy-to-work-with alternative to XML.
- JSON can be de-serialized into objects and the objects serialized back into strings.
There are API's that can do these transformations on both the client and server.
- Webservices can return JSON automatically for immediate use within JavaScript
JSON supports the usual basic type flavors: numbers, strings, booleans, arrays,
objects and null.
The quickest way to
understand how the JSON syntax works is to look at an example. Below is a sample
JSON object definition called "contact". It has string properties for "firstName"
and "lastName". Another property, "address" is an object that has its own properties
for "streetAddress", "city", "state" and "postalCode". These address properties
are all string except "postalCode" that contains a numeric value. The last property
"phoneNumbers" is actually an array of strings.
[JavaScript] JSON Sample
var contact = {
// string property
"firstName": "John",
"lastName": "Smith",
// address property with sub-properties
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
// numeric property
"postalCode": 10021
},
// array
"phoneNumbers": [
"212 555-1234",
"646 555-4567"
]}
;
As you can see in the sample above, the JSON object definition appears between curly
braces. Each property and value pair are separated by a colon. Arrays are contained
within square brackets.
Using JSON Objects
Once the
JSON object is defined you can assign and retrieve values using the properties of
the object. In this next sample the "contact" object is assigned a new first and
last name and the second element of the phoneNumbers array is also replaced with
a new value.
[JavaScript] Assigning and Retrieving JSON Properties
// change the name and phoneNumbers properties
contact.firstName = "Bob";
contact.lastName = "Jones";
contact.phoneNumbers[1] = "123 555-9999";
alert(contact.firstName + ' ' +
contact.lastName + ' phone: ' + contact.phoneNumbers[1]);
Running this bit of JavaScript fires the alert shown below:
Serializing JSON
You can also take a JSON string and transform it into an object. The ASP.NET AJAX
Library includes a JavaScriptSerializer object within the Sys.Serialization namespace
that you get for free when you include a ScriptManager on the page. If you call
the JavaScriptSerializer deserialize() method and pass a JSON string, the method
will deserialize the string into a JSON object. Call the serialize() method to transform
the a JSON object back to a string.
The sample below shows a JSON string defined for "contact". This is exactly the
same as the "contact" object defined in the last example, but surrounded with quotes.
A call to deserialize() takes the contact JSON string and transforms it into an
object representation. Following that, the contact object is converted back using
the serialize() method into its string representation.
[JavaScript] Serialize and Deserialize
var contactString = '{"firstName": "John", "lastName": "Smith", ' +
'"address": {"streetAddress": "21 2nd Street",' +
'"city": "New York","state": "NY", "postalCode": 10021},' +
'"phoneNumbers": ["212 555-1234","646 555-4567"]}';
// deserialize JSON string to an object
contact =
Sys.Serialization.JavaScriptSerializer.deserialize(contactString);
// serialize the contact JSON into a string
var contactStrings =
Sys.Serialization.JavaScriptSerializer.serialize(contact);
[C#] Serializing and Deserializing in Code-Behind
protected void Page_Load(object sender, EventArgs e)
{
Contact contact = new Contact();
contact.FirstName = "Bob";
contact.LastName = "Smith";
contact.Address.City = "San Francisco";
contact.Address.State = "California";
contact.Address.StreetAddress = "123 Telerik Ave";
contact.Address.PostalCode = 91234;
contact.PhoneNumbers.Add("123 555-1234");
contact.PhoneNumbers.Add("444 555-9876");
JavaScriptSerializer jss = new JavaScriptSerializer();
string contactString = jss.Serialize(contact);
tbServerStatus.Text = contactString;
Contact contact2 = jss.Deserialize
<contact>(contactString);
tbServerStatus.Text += System.Environment.NewLine + System.Environment.NewLine +
contact2.FirstName + " " + contact2.LastName;
}
