JSON

Recommended Reading

• JSON by JSON.org
• Working with JSON by Mozilla
• JSON Tutorial by restfulapi.net

JavaScript Object Notation (JSON)

Introduction

JSON is a lightweight data specification which is the most widely used data format for data interchange in web applications. While XML was the initial interchange format (remember SOAP and the initial web services?), it turns out that XML data objects are rather large, unwieldly and just not that efficient to be sending back and forth from server to client. This isn't to day that XML didn't work, it did, but as any of you who have viewed larger XML files know, XML does not have the best data to file size ratio.

Turns out, JSON became more popular than XML for several reasons. First, it worked well with all sorts of programming languages, is lightweight (good data to file size ration), and just as important, readable by humans as well as parseable by applications. There was also the vibe that XML was used by large corportations who had the resources to create large, elaborate schemas...and many developers just wanted something fast and simple. In the end, JSON won out.

JSON was derived from a subset of JavaScript(JS) after JS decided to support object literals and array literals.

JSON is built on two structures

1. A collection of name/value pairs. These are:
   1. Object
   2. Record
   3. Struct
   4. Dictionary
   5. Hash Table
   6. Keyed List
   7. Associative Array
2. An ordered list of values, such as
   1. Array
   2. Vector
   3. List
   4. Sequence

Now if you look at the above structures, you can see that these are common data structures across a multitude of languages. This is what makes the data format work with som many programming languages.

JSON definitions

Okay, let's look at some simple JSON definitions in a JSON document.

// JSON Object definition

{
  "login": {
    "username":  "bob,
    "password":  "jhuep"
  }
}

So, in the above example, we define a "login" name that has an object with two name/value pairs, the username and password. In this instance the username is "bob" and the password is "jhuep".

You can nest object definitions just as easily. In the case below, the "login" name has two name/value pairs, a "userinfo" name with its associated object and a "password" name/value pair.

{
  "login": {
    "userinfo":  {
       "username": "bob",
       "userid":   1000
    },
    "password":  "jhuep"
  }
}

In the next example we see an example of an array definition. This array has 3 objects.

// JSON Array definition

{
  "ids": ["1","2","3","4",'5"]
}

// or 

{
  "ids:[
     {"id": 1},
     {"id": 2},
     {"id": 3},
     {"id": 4},
     {"id": 5"
}

// or

{
  "submarines":[
    {
      "id":        1,
      "name":      "USS Pogy",
      "hull":      "SSN 647"
    },
    {
      "id":        2,
      "name":      "USS Los Angeles",
      "hull":      "SSN 688"
    },
    {
      "id":        3,
      "name":      "USS Ohio",
      "hull":      "SSGN 726"
    }
}

// or

{
  "login": {
    "userinfo":  {
       "username": "bob",
       "userid":   1000,
       "rights":   ["admin","webadmin","dba"]
    },
    "password":  "jhuep"
  }
}

In this case, we have a "submarine" array with 3 entries, each entry consisting of an "id", "name" and "hull". Note that JSON arrays are ordered collections of arbitrary types, they can contain values of different types.

So, JSON documents have a fairly simple syntax. It is all about defining name/value pairs. A JSON document may contain the following separators that are used to define the object name and its name/value pairs

• ":" to separate the name from the value
• "," to separate one name/value pair from the next
• "{" and "}" to define a JSON Object
• "[" and "]" to define a JSON array

Name value pairs are always in the same pattern. The name is in quotes, followed by a ":" and then a value. The value can be one of 6 different data types:

1. objects - an unordered set of name/value pairs, separated by commas
2. booleans - true or false (no quotes)
3. numbers - fixed or float, base 10 supports exponential notation
4. strings - Anthing in double quotes ("")
5. arrays - an ordered collection of values. These can be any one of the other types in this listing
6. null (or empty) - basically nothing after the ":" symbol

JSON schemas

Like XML, JSON does support the idea of a schema that lets you validate the format of a given JSON document. The JSON schema is maintained at https://json-schema.org. The schema allows you to annotate and validate JSON documents.

JSON Objects

Once you have a JSON object, you can access the values in the object two ways.

The first is using the dot "." notation. Consider the following:

{
  "login": {

       "username": "bob",
       "userid":   1000,
       "rights":   ["admin","webadmin","dba"]   
  }
}

Using the console.log tool, you can get the username by typing

  console.log(login.username);

The second method is using the bracket notation:

  console.log("login["username"]);

You can also use a loop to iterate through object values

  for (x in login)
  { 
    console.log(x + " = " + (login[x]));
  }

  // which outputs
  username = bob
  userid = 1000
  rights = admin,webadmin,dba

You can modify JSON object values by using notation similar to that above.

  login.username = "robert"
  console.log(login.username)

  // which outputs
  robert

Or you can use brackets

  login["username"] = "robert"
  console.log(login["username"]

  // which outputs
  robert

You can even delete the properties from a JSON object using the delete keyword

  delete login.username;

JSON Arrays

Let's look at one of our definitions from above:

{
  "login": {

       "username": "bob",
       "userid":   1000,
       "rights":   ["admin","webadmin","dba"]   
  }
}

You can access the values of an array using the index of the value. Since we've already seen how to access traits of an Object, we can get the first "rights" value from above by using

  console.log(login.rights[0]);

  // which outputs
  admin

And of course you can use the "for" keyword again to loop through values:

  for (in in username.rights) {
    console.log(username.rights[i]);
  }

  // which outputs
  admin
  webadmin
  dba

Deleting an element

  delete login.rights[0];

Updating an element

  login.rights[0]="root";

It turns out that with JSON, multi-dimensional arrays are just arays of arrays, they don't have something like [][] definitions. So a multi-dimensional array looks something like

{
  "login": {

       "username": "bob",
       "userid":   1000,
       "rights":   [["admin", [1,2,3]],
                    ["webadmin", [100, 200, 300]],
                    ["dba", [0,0,0]]
                   ]   
  }
}

JSON vs XML

Earlier, I mentioned that JSON is now the data interchange format of choice. Now XML is still widely used, and has some advantages over JSON as well

JSON Advantages

• Smaller size (better data density)
• Less verbose (less visual clutter)
• Works really well with JavaScript (since it is a form of JavaScript)

XML Advantages

• Can associate Meta data with attributes
• Most browsers will readily render
• Suppots wider range of data types
• Supports complete document markup

Below is a comparison of two simple Objects, one represented in XML, one in JSON. Note the size difference of the two data formats.

<?xml versin="1.0" encoding="UTF-"?>

<authors>
  <name>
    <firstname>Bob</firstname>
    <lastname>Evans</lastname>
  </name>
  <name>
    <firstname>Kurt</firstname>
    <lastname>Welty</lastname>
  </name>
</authors>

{ authors: {

name: [
  {
    firstname: "Bob",
    lastname: "Evans"
   },
   {
   firstname: "Kurt",
   lastname: "Welty"
   }
}}

Exploring JSON (and JavaScript) in your browser

Okay, it turns out that you can play with JSON, and JavsScript in your browser...well, at least some of them. Both Chrome and Firefox support a nice Web Console that lets you have a prompt or area where you can type out JavaScript and JSON and then play with them on the fly. I'm going to show you how to do it on Firefox first, then briefly mention Chrome.

So, let's bring up an empty Firefox browser and locate the option menu and click on it.a

After clicking on the menu, you should see the first level menu appear...

Click on the Web Developer menu item...

After selecting Web console, your browser now has a new window!

Okay, at this point you have a "shell" window that you can type commands in, and then see the output in the window to the right.

So, if we want to write to the console, we use the console.log() command...Enter the console.log("Hello world!") string and then hit CTRL-Enter to run everything in the window.

You can add more JavaScript. Note that the CTRL-Enter runs everything in the window to the left.

So, that means we can also type JSON code into this window and play with it. I've copied an example already covered above so you can see how it would work.

This lets you at least play/explore with JSON in an interactive environment.

Chrome supports a similar setup, if you go to their option menu and click on it...

Next choose the "More tools" option...

And finally the Developer Tools selection...

Once the tools window comes up, select the "Console" tab at the top and you are ready to go!