Click here to Skip to main content
15,860,859 members
Articles / Programming Languages / Javascript
Article

Have you met JSON?

Rate me:
Please Sign up or sign in to vote.
3.22/5 (6 votes)
13 Aug 20044 min read 73.7K   23   13
An introduction to JSON, the JavaScript Object Notation, which has been described as "A fat-free alternative to XML".

An introduction to JSON

Image 1

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:

JavaScript
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:

JavaScript
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:

XML
<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


Written By
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 Pin
BinodSuman30-May-09 5:25
BinodSuman30-May-09 5:25 
GeneralFix the example please Pin
Adnan Siddiqi28-Jun-06 0:10
Adnan Siddiqi28-Jun-06 0:10 
GeneralI agree with Captain. JSON is rubbish Pin
hex225-Apr-06 16:31
hex225-Apr-06 16:31 
Generalnot the author's fault that JSON is naive Pin
Captain Nicklas30-Aug-04 10:51
Captain Nicklas30-Aug-04 10:51 
GeneralRe: not the author's fault that JSON is naive Pin
zorrer15-Dec-04 1:26
zorrer15-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 Pin
Captain Nicklas15-Dec-04 8:58
Captain Nicklas15-Dec-04 8:58 
GeneralRe: not the author's fault that JSON is naive Pin
Tim Sherrill24-Jan-05 4:25
Tim Sherrill24-Jan-05 4:25 
GeneralRe: not the author's fault that JSON is naive Pin
ArchitectDotNet24-Jan-05 5:06
ArchitectDotNet24-Jan-05 5:06 
GeneralRe: not the author's fault that JSON is naive Pin
Tim Sherrill24-Jan-05 5:31
Tim Sherrill24-Jan-05 5:31 
GeneralRe: not the author's fault that JSON is naive Pin
SwamiDot20-Feb-05 21:01
SwamiDot20-Feb-05 21:01 
GeneralRe: not the author's fault that JSON is naive Pin
Joshua F22-Oct-07 2:24
Joshua F22-Oct-07 2:24 
GeneralRe: not the author's fault that JSON is naive Pin
Spiff Dog3-Aug-06 8:19
Spiff Dog3-Aug-06 8:19 
GeneralRe: not the author's fault that JSON is naive Pin
webber12345621-Sep-06 6:09
webber12345621-Sep-06 6:09 

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

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