Click here to Skip to main content
Click here to Skip to main content

Have you met JSON?

By , 13 Aug 2004
Rate this:
Please Sign up or sign in to vote.

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

DFU23
Web Developer
United States United States
Born and raised in Charlottesville, Virginia, USA.
 
Majored in Information Science at Christopher Newport University and now I design/program web applications for a living.
 
I'm an avid fan of the W3C web standards and would love to see them used to their full potential and make the web a better place for both surfers and developers.

Comments and Discussions

 
GeneralAjax and JSON example, How to use JSON with Ajax PinmemberBinodSuman30-May-09 5:25 
GeneralFix the example please PinmemberAdnan Siddiqi28-Jun-06 0:10 
GeneralI agree with Captain. JSON is rubbish Pinmemberhex225-Apr-06 16:31 
Generalnot the author's fault that JSON is naive PinmemberCaptain Nicklas30-Aug-04 10:51 
GeneralRe: not the author's fault that JSON is naive Pinmemberzorrer15-Dec-04 1:26 
No hard feelings....Blush | :O
but...
this is the same war which says "Why C# when Java"; "Why XAML when XML"
Eek! | :eek:
GeneralRe: not the author's fault that JSON is naive PinmemberCaptain Nicklas15-Dec-04 8:58 
GeneralRe: not the author's fault that JSON is naive PinmemberTim Sherrill24-Jan-05 4:25 
GeneralRe: not the author's fault that JSON is naive PinmemberArchitectDotNet24-Jan-05 5:06 
GeneralRe: not the author's fault that JSON is naive PinmemberTim Sherrill24-Jan-05 5:31 
GeneralRe: not the author's fault that JSON is naive PinmemberSwamiDot20-Feb-05 21:01 
GeneralRe: not the author's fault that JSON is naive PinmemberJoshua F22-Oct-07 2:24 
GeneralRe: not the author's fault that JSON is naive PinmemberSpiff Dog3-Aug-06 8:19 
GeneralRe: not the author's fault that JSON is naive Pinmemberwebber12345621-Sep-06 6:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140421.2 | Last Updated 14 Aug 2004
Article Copyright 2004 by DFU23
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid