Have you met JSON?

An introduction to JSON

If you haven't heard of JSON before (I'm pronouncing it like Jason, the person's name ... I could be way off though) then here is your chance to get acquainted with it. JSON stands for JavaScript Object Notation and so far my favorite description of this technology is "A Fat-Free alternative to XML".

JSON is not a special additive to JavaScript instead it is a lightweight data-interchange format that is easy to use. It claims to be easy for both humans and machines to read and not to mention either parse or generate. If you would like a more in depth explanation on JSON visit Introducing JSON and make sure you check out JSON: The Fat-Free alternative to XML to see the comparisons made between JSON and XML.

A simple example

Recently I did some work that required quite a bit of manipulating pre-existing JavaScript code and afterwards I began to think about how some parts of the process could have been simplified. One portion dealt with displaying data that was stored in JavaScript arrays and placing them into an HTML table. The original code used client-side JavaScript within the body of the page and document.write() to render to table dynamically (frames based application, the data resided in another frame). This became highly undesirable mainly because none of the CSS class rules would apply to the dynamically written table which meant the separation of content and design was not possible.

So I came up with a widget in JavaScript to produce the table in the format(s) that I needed. I call my widget an AttributeTable because it displays tabular information for items in either a horizontal or a vertical layout. Each item has the same attributes but different values so it essentially is a record set of data. The only question was how to pass in the record set to my AttributeTable? In comes JSON.

Here you would create a new AttributeTable:

var domTable = new AttributeTable(true, records);

The above statement is very simple. The variable domTable holds the AttributeTable object which contains a newly created DOM table. The first parameter passed is a boolean which determines whether to display the records vertically or horizontally (true displays a vertical layout). The second parameter is our JSON object. Here's an example:

var records = {
    "data" : [
        {
            "First Name" : "Bob",
            "Last Name" : "Smith",
            "Email" : "bsmith@someurl.com",
            "Phone" : "(555) 555-1212",
        },
        {
            "First Name" : "Jan",
            "Last Name" : "Smith",
            "Email" : "jsmith@someurl.com",
            "Phone" : "(555) 555-3434",
        },
        {
            "First Name" : "Sue",
            "Last Name" : "Smith",
            "Email" : "ssmith@someurl.com",
            "Phone" : "(555) 555-5656",
        }
    ]
};

As I said there is nothing special about the implementation of JSON. The variable records is simply an object that contains a property called data which is an array of more objects. This could be expressed in XML as:

<data>
    <item>
        <FirstName>Bob</FirstName>
        <LastName>Smith</LastName>
        <Email>bsmith@someurl.com</Email>
        <Phone>(555) 555-1212</Phone>
    </item>
    <item>
        <FirstName>Jan</FirstName>
        <LastName>Smith</LastName>
        <Email>jsmith@someurl.com</Email>
        <Phone>(555) 555-3434</Phone>
    </item>
    <item>
        <FirstName>Sue</FirstName>
        <LastName>Smith</LastName>
        <Email>ssmith@someurl.com</Email>
        <Phone>(555) 555-5656</Phone>
    </item>
</data>

More about the Attribute Table

Don't be fooled by the modest earlier description of the AttributeTable. This is more than your ordinary HTML table. Besides the ability to dynamically display the records within the JSON object and switching the orientation of the layout ... this table can dynamically sort on any column and when it is in the vertical orientation it automatically sets up pagination for itself. Here's how it works ...

• Dynamic table sorting

  You have probably seen this done on HTML tables before if you have done work with web pages. It is a very handy utility and the ability to sort on the client-side as opposed to the server-side is very nice indeed. However, I cannot take the credit for the table sorting functionality. I must give a great deal of credit to Mike Hall (also known as BrainJar here on The Code Project) for this feature, not to mention his very useful web site of coding examples.

• Automatic pagination

  When an AttributeTable is created with a vertical orientation each record is put into its own <tbody>. Since a table can have multiple table bodies this made pagination easy to do simply by displaying the appropriate record and hiding all of the other records. Footer is added to the table for page navigation and a caption for indicating the current and total records.

• Designing with CSS

  I noted earlier that it became rather frustrating to make any display changes to the table with the original way it was being created. The AttributeTable alleviates that frustration and now it can be completely changed visually via the use of CSS. Just look at the CSS file within my example and it should be self explanatory how to change things to your liking. Additional classes could easily be inserted into the JavaScript code for specific elements if it is needed.

More about JSON

This is a very rudimentary example of JSON and by no means shows the true potential that it has. For further investigation into this subject I will offer a few places that I have been and found rather interesting.

• Douglas Crockford's Wrrrld Wide Web

  A very interesting site and from what I can tell the creator of JSON. Definitely worth a look as there are some rather fun and fascinating items on his web site.

• Jan-Klaas Kollhof's web site

  The developer of the JSON-RPC which has some pretty neat examples. In particular, I found Kollhof's work with JavaScript o lait and SVG to be very inspiring.

One last note

The example files will be posted very soon ... I wanted to add some more examples and a piece of added functionality to the AttributeTable before I posted them here.