The jQuery Parse JSON Utility

jquery blurThe jQuery Parse JSON Utility takes a well-formed JSON string and returns the resulting JavaScript object.  That first sentence makes some assumptions about background knowledge, so let’s take it a step at time.  jQuery is a JavaScript library that hides a lot of JavaScript detail and, as the ad says, let’s you write less and do more.  JSON stands for JavaScript Object Notation, and it is a set of rules about how to create JavaScript objects from non-object data.  Finally, as we said in shorthand above, the jQuery Parse JSON utility is the set of methods and objects in jQuery that takes a formatted JSON character string as input and produces JavaScript objects as output.  We’ll look at the Parse utility and JSON in more detail in the following paragraphs.

New to jQuery? Take a course at Udemy.com.

Here’s the Parse utility signature:

jQuery.parseJSON(json)

The whole trick here is that the input (json) needs to be properly formatted.  The final word on the definition of valid JSON character strings is here: http://json.org/.  It’s worth a look because it will dispel any thoughts you might have about JSON being complex.  It’s not at all.   As the specification at json.org says, it’s a lightweight data-interchange format that’s easy for humans and machines to read.   JSON has only two structures: a collection of name/value pairs (an object) and an ordered list of values (an array).  This means an object is an unordered list of name/value pairs and the proper formatting is obvious from the syntax diagram shown at http://json.org.

Objects begin and end with “braces” and have name/value pairs in them separated by commas.

Here’s an example with some JSON:

var newObject = jQuery.parseJSON( ‘ {  “name” : “Budweiser”}  ‘  );

alert (newObject.name === “Budweiser”);

If you drop the above two lines into a text file (with the supporting HTML etc.) and run it in your browser, you’ll see the alert return “true”.

JSON is an easy data exchange format to use from a programming point of (faster and easier) and is popular in AJAX-style applications that do frequent, asynchronous interchanges with the server. Such a style produces livelier looking interfaces which are harder to produce if you’re using full page interactions.  Also, JSON uses JavaScript syntax, so you don’t need any other supporting software to use JSON with JavaScript.

Learn more about Ajax and JSON with a course at Udemy.com.

The Parse JSON utility takes JSON strings and makes JavaScript objects.   What about taking JavaScript objects and making JSON strings?  You would want to do that if you were using JSON as a full blown data interchange protocol. Well, you’re in luck!  Let’s look at JSON.stringify().

Here’s the signature:

JSON.stringify(value [ , replacer ] [ , space ] )

The value parameter is required and is the object or array that you want to convert to a string.

The replacer parameter is optional and can be an array or a function that transforms the object according to you needs.  When you specify a function, the return value is used in the string instead of the original value and if the function returns “undefined”, the member is skipped over in the stringify operation.  The space parameter is also optional and is a convenient way to add white space, line breaks, or indentation to text string you are producing so it’s easier to read.  Be aware that if you omit the space parameter there won’t be any extra white space in the output.

Another feature to be aware of here is that if the “value” parameter has its own toJSON method defined, then stringify will use it instead.  This is so any object can control its own JSON representation.  If, however, the object’s own toJSON method returns “undefined”, then the member is skipped by the stringify process.

The order of execution is what you would expect here.  If the “value” parameter has a toJSON, it is run.  If not, then the original value parameter is used.   Then, if there is a replacer parameter, it is applied to the result of the process just described.  As the last step, spaces are applied if the space parameter is present.

It’s time for a simple example.  Let’s define a simple object and then stringify() it.

json-parser-1

We create a simple new object (“beer”) with three properties.  Just for fun, we define an array (“beerfilter”) to serve as our replacer parameter and use a tab “\t” as a spacer.  Then, as described above, we call the stringify method on the JSON object  and pass it the three parameters we just described and out pops a well-formed JSON string as seen below:

json-parser-2

So there it is – an easy to use data transport mechanism that was made for JavaScript.  We can parse into objects and stringify back.  JSON is newer than XML, but it is rapidly gaining popularity in the web development community.  It’s even shown up in the .NET world where most often you have something other than JavaScript on the server.    An open source product called Jayrock is an implementation of JSON for the .NET Framework.  I would expect JSON’s popularity to keep on growing.

Learn more about JSON with a course at Udemy.com.