Guide for Developers: JSON Tutorial

JSON or JavaScript Object Notation is a lightweight is a text-based open standard designed for human-readable data interchange. The JSON format was originally specified by Douglas Crockford, and is described in RFC 4627. The official Internet media type for JSON is application/json. The JSON filename extension is .json.

This tutorial will help you in understanding JSON and how to use it within various programming languages like PHP, PERL, Python, Ruby, Java etc.

This tutorial has been designed to help beginners understand basic functionality of JavaScript Object Notation (JSON) to develop data interchange format. After completing this tutorial you will find yourself at a moderate level of expertise in using JSON with Javscript, Ajax, Perl etc from where you can take yourself to next levels.

Before proceeding with this tutorial you should have a basic understanding of how web application work over HTTP and we assume that you have basic knowledge of JavaScript.

JSON or JavaScript Object Notation is a lightweight is a text-based open standard designed for human-readable data interchange. Conventions used by JSON are known to programmers which include C, C++, Java, Python, Perl etc.

· JSON stands for JavaScript Object Notation.

· This format was specified by Douglas Crockford.

· This was designed for human-readable data interchange

· JSON has been extended from the JavaScript scripting language.

· JSON filename extension is .json

· JSON Internet Media type is application/json

· The Uniform Type Identifier is public.json

Uses of JSON

· JSON is used when writing JavaScript based application which includes browser extension and websites.

· JSON format is used for serializing & transmitting structured data over network connection.

· JSON is primarily used to transmit data between server and web application.

· Web Services and API.s use JSON format to provide public data.

· JSON can be used with modern programming languages.

Characteristics of JSON

· It is easy to read and write JSON.

· JSON is lightweight text based interchange format

· JSON is language independent.

Simple Example in JSON

Example shows Books information stored using JSON considering language of books and there editions:

{
    "book": [
    {
       "id":"01",
       "language": "Java",
       "edition": "third",
       "author": "Herbert Schildt"
    },
    {
       "id":"07",
       "language": "C++",
       "edition": "second"
       "author": "E.Balagurusamy"
    }]
}

After understanding the above program we will try another example, let's save the below code as json.htm:

<html>
<head>
<title>JSON example</title>
<script language="javascript" >

  var object1 = { "language" : "Java", "author" : "herbert schildt" };
document.write("<h1>JSON with JavaScript example</h1>");
document.write("<br>");
document.write("<h3>Language = " + object1.language+"</h3>");
  document.write("<h3>Author = " + object1.author+"</h3>");

var object2 = { "language" : "C++", "author" : "E-Balagurusamy" };
document.write("<br>");
document.write("<h3>Language = " + object2.language+"</h3>");
  document.write("<h3>Author = " + object2.author+"</h3>");

  document.write("<hr />");
document.write(object2.language + " programming language can be studied " +
"from book written by " + object2.author);
document.write("<hr />");

</script>
</head>
<body>
</body>
</html>

Now let's try to open json.htm using IE or any other javascript enabled browser, this produces the following result:

JSON - Syntax

Let's have a quick look on JSON basic syntax. JSON syntax is basically considered as subset of JavaScript syntax, it includes the following:

· Data is represented in name/value pairs

· Curly braces hold objects and each name is followed by ':'(colon), the name/value pairs are separated by , (comma).

· Square brackets hold arrays and values are separated by ,(comma).

Below is a simple example:

JSON supports following two data structures:

· Collection of name/value pairs: This Data Structure is supported by different programming language.

· Ordered list of values: It includes array, list, vector or sequence etc.

JSON - DataTypes

There are following datatypes supported by JSON format:

Type

Description

Number

double- precision floating-point format in JavaScript

String

double-quoted Unicode with backslash escaping

Boolean

true or false

Array

an ordered sequence of values

Value

it can be a string, a number, true or false, null etc

Object

an unordered collection of key:value pairs

Whitespace

can be used between any pair of tokens

null

empty

Number

· It is a double precision floating-point format in JavaScript and it depends on implementation.

· Octal and hexadecimal formats are not used.

· No NaN or Infinity is used in Number.

The following table shows number types:

Type

Description

Integer

Digits 1-9, 0 and positive or negative

Fraction

Fractions like .3, .9

Exponent

Exponent like e, e+, e-,E, E+, E-

Syntax:

var json-object-name = { string : number_value, .......}

Example:

Example showing Number Datatype, value should not be quoted:

var obj = {marks: 97}

String

· It is a sequence of zero or more double quoted Unicode characters with backslash escaping.

· Character is a single character string i.e. a string with length 1.

The table shows string types:

Type

Description

double quotation

reverse solidus

solidus

backspace

form feed

new line

carriage return

horizontal tab

four hexadecimal digits

Syntax:

var json-object-name = { string : "string value", .......}

Example:

Example showing String Datatype:

var obj = {name: 'Amit'}

Boolean

It includes true or false values.

Syntax:

var json-object-name = { string : true/false, .......}

Example:

var obj = {name: 'Amit', marks: 97, distinction: true}

Array

· It is an ordered collection of values.

· These are enclosed square brackets which means that array begins with .[. and ends with .]..

· The values are separated by ,(comma).

· Array indexing can be started at 0 or 1.

· Arrays should be used when the key names are sequential integers.

Syntax:

[ value, .......]

Example:

Example showing array containing multiple objects:

{
"books": [
   { "language":"Java" , "edition":"second" },
   { "language":"C++" , "lastName":"fifth" },
   { "language":"C" , "lastName":"third" }
]
}

Object

· It is an unordered set of name/value pairs.

· Object are enclosed in curly braces that is it starts with '{' and ends with '}'.

· Each name is followed by ':'(colon) and the name/value pairs are separated by , (comma).

· The keys must be strings and should be different from each other.

· Objects should be used when the key names are arbitrary strings

Syntax:

{ string : value, .......}

Example:

Example showing Object:

{
"id": "011A",
"language": "JAVA",
"price": 500,
}

Whitespace

It can be inserted between any pair of tokens. It can be added to make code more readable. Example shows declaration with and without whitespace:

Syntax:

{string:" ",....}

Example:

var i= " sachin";
var j = " saurav"

null

It means empty type.

Syntax:

null

Example:

var i = null;

if(i==1)
{
document.write("<h1>value is 1</h1>");
}
else
{
document.write("<h1>value is null</h1>");
}

JSON Value

It includes:

· number (integer or floating point)

· string

· boolean

· array

· object

· null

Syntax:

Example:

var i =1;
var j = "sachin";
var k = null;

JSON - Objects

Creating Simple Objects

JSON objects can be created with Javascript. Let's us see various ways of creating JSON objects using Javascript:

· Creation of an empty Object:

var JSONObj = {};

· Creation of new Object:

var JSONObj = new Object();

· Creation of an object with attribute bookname with value in string, attribute price with numeric value. Attributes is accessed by using '.' Operator:

var JSONObj = { "bookname ":"VB BLACK BOOK", "price":500 };

This is an example which shows creation of an object in javascript using JSON, save the below code as json_object.htm:

<html>
<head>
<title>Creating Object JSON with JavaScript</title>
<script language="javascript" >

var JSONObj = { "name" : "tutorialspoint.com", "year" : 2005 };
document.write("<h1>JSON with JavaScript example</h1>");
document.write("<br>");
document.write("<h3>Website Name="+JSONObj.name+"</h3>");
document.write("<h3>Year="+JSONObj.year+"</h3>");

</script>
</head>
<body>
</body>
</html>

Now let's try to open json_object.htm using IE or any other javascript enabled browser, this produces the following result:

Creating Array Objects

Below example shows creation of an array object in javascript using JSON, save the below code as json_array_object.htm:

<html>
<head>
<title>Creation of array object in javascript using JSON</title>
<script language="javascript" >

document.writeln("<h2>JSON array object</h2>");

var books = { "Pascal" : [
      { "Name" : "Pascal Made Simple", "price" : 700 },
      { "Name" : "Guide to Pascal", "price" : 400 }
   ],
   "Scala" : [
      { "Name" : "Scala for the Impatient", "price" : 1000 },
      { "Name" : "Scala in Depth", "price" : 1300 }
   ]
}

var i = 0
document.writeln("<table border='2'><tr>");
for(i=0;i<books.Pascal.length;i++)
{
   document.writeln("<td>");
   document.writeln("<table border='1' width=100 >");
   document.writeln("<tr><td><b>Name</b></td><td width=50>"
   + books.Pascal[i].Name+"</td></tr>");
   document.writeln("<tr><td><b>Price</b></td><td width=50>"
   + books.Pascal[i].price +"</td></tr>");
   document.writeln("</table>");
   document.writeln("</td>");
}

for(i=0;i<books.Scala.length;i++)
{
   document.writeln("<td>");
   document.writeln("<table border='1' width=100 >");
   document.writeln("<tr><td><b>Name</b></td><td width=50>"
   + books.Scala[i].Name+"</td></tr>");
   document.writeln("<tr><td><b>Price</b></td><td width=50>"
   + books.Scala[i].price+"</td></tr>");
   document.writeln("</table>");
   document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>

Now let's try to open json_array_object.htm using IE or any other javascript enabled browser, this produces the following result:

JSON - Schema

JSON Schema is a specification for JSON based format for defining structure of JSON data. It was written under IETF draft which expired in 2011. JSON Schema:

· Describes your existing data format.

· Clear, human- and machine-readable documentation.

· Complete structural validation, useful for automated testing.

· Complete structural validation, validating client-submitted data.

JSON Schema Validation Libraries

There are several validators currently available for different programming languages. Currently the most complete and compliant JSON Schema validator available is JSV

Languages

Libraries

WJElement (LGPLv3)

Java

json-schema-validator (LGPLv3)

.NET

Json.NET (MIT)

ActionScript 3

Frigga (MIT)

Haskell

aeson-schema (MIT)

Python

Jsonschema

Ruby

autoparse (ASL 2.0); ruby-jsonschema (MIT)

PHP

php-json-schema (MIT). json-schema (Berkeley)

JavaScript

Orderly (BSD); JSV; json-schema; Matic (MIT); Dojo; Persevere (modified BSD or AFL 2.0); schema.js.

JSON Schema Example

Following is a basic JSON schema which covers a classical product catalog description:

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "title": "Product",
    "description": "A product from Acme's catalog",
    "type": "object",
    "properties": {
        "id": {
            "description": "The unique identifier for a product",
            "type": "integer"
        },
        "name": {
            "description": "Name of the product",
            "type": "string"
        },
        "price": {
            "type": "number",
            "minimum": 0,
            "exclusiveMinimum": true
       }
    },
    "required": ["id", "name", "price"]
}

Let's check various important keywords which can be used in this schema:

Keywords

Description

$schema

The $schema keyword states that this schema is written according to the draft v4 specification.

title

You will use this to give a title to your schema

description

A little description of the schema

type

The type keyword defines the first constraint on our JSON data: it has to be a JSON Object.

properties

Defines various keys and their value types, minimum and maximum values to be used in JSON file.

required

This keeps a list of required properties.

minimum

This is the constraint to be put on the value and represents minimum acceptable value.

exclusiveMinimum

If "exclusiveMinimum" is present and has boolean value true, the instance is valid if it is strictly greater than the value of "minimum".

maximum

This is the constraint to be put on the value and represents maximum acceptable value.

exclusiveMaximum

If "exclusiveMaximum" is present and has boolean value true, the instance is valid if it is strictly lower than the value of "maximum".

multipleOf

A numeric instance is valid against "multipleOf" if the result of the division of the instance by this keyword's value is an integer.

maxLength

The length of a string instance is defined as the maximum number of its characters.

minLength

The length of a string instance is defined as the minimum number of its characters.

pattern

A string instance is considered valid if the regular expression matches the instance successfully.

You can check a http://json-schema.org for complete list of keywords which can be used in defining JSON schema. Above schema can be used to test the validity of the below given JSON code:

[
    {
        "id": 2,
        "name": "An ice sculpture",
        "price": 12.50,
    },
    {
        "id": 3,
        "name": "A blue mouse",
        "price": 25.50,
    }
]

JSON - Comparison with XML

JSON and XML are human readable formats and are language independent. They both have support for creation, reading and decoding in real world situations. We can compare JSON with XML based on the following factors:

Verbose

XML is more verbose than JSON, so it's faster to write JSON for humans.

Arrays Usage

XML is used to describe structured data which doesn't include arrays whereas JSON include arrays.

Parsing

JavaScript's eval method parses JSON. When applied to JSON, eval returns the described object.

Example

This shows individual examples of XML and JSON:

JSON

{
   "company": Volkswagen,
   "name": "Vento",
   "price": 800000
}

XML

<car>
   <company>Volkswagen</company>
   <name>Vento</name>
   <price>800000</price>
</car>

JSON with Ajax

Ajax is Asynchronous JavaScript and XML which is used on client side as group of interrelated web development techniques in order to create asynchronous web applications. According to Ajax model, web applications can send data and retrieve data from a server asynchronously without interfering with the display, behavior of existing page.

Many developers use JSON to pass AJAX updates between client and server. Websites updating live sports scores can be considered as an example of AJAX. If these scores have to be updated on the website, then they must be stored on the server so that the webpage can retrieve the score when it is required. This is where we can make use of JSON formatted data.

Any data that is updated using AJAX can be stored using the JSON format on web server. Ajax is used so that javascript can retrieve these JSON files when necessary, they parse them and then does of the two:

· Store the parsed values in variables for further processing before displaying them on the webpage

· It directly assign the data to the DOM elements in the webpage, so that it gets displayed on the website.

Example

The below code shows JSON with Ajax, save it in ajax.htm file. Here loading function loadJSON() will be used asynchronously to upload JSON data.

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSON()
{
   var data_file = "http://www.tutorialspoint.com/json/data.json";
   var http_request = new XMLHttpRequest();
   try{
      // Opera 8.0+, Firefox, Chrome, Safari
      http_request = new XMLHttpRequest();
   }catch (e){
      // Internet Explorer Browsers
      try{
         http_request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
          return false;
         }
      }
   }
   http_request.onreadystatechange = function(){
      if (http_request.readyState == 4 )
      {
        // Javascript function JSON.parse to parse JSON data
        var jsonObj = JSON.parse(http_request.responseText);

        // jsonObj variable now contains the data structure and can
        // be accessed as jsonObj.name and jsonObj.country.
        document.getElementById("Name").innerHTML = jsonObj.name;
        document.getElementById("Country").innerHTML = jsonObj.country;
      }
   }
   http_request.open("GET", data_file, true);
   http_request.send();
}
</script>
<title>narendra86.blogspot.in JSON</title>
</head>
<body>
<h1>Cricketer Details</h1>
<table class="src">
<tr><th>Name</th><th>Country</th></tr>
<tr><td><div id="Name">Sachin</div></td>
<td><div id="Country">India</div></td></tr>
</table>

<div class="central">
<button type="button" onclick="loadJSON()">Update Details </button>
</body>
</html>

Following is the input file data.json having data in JSON format which will be uploaded asynchronously when we click Update Detail button. This file is being kept in http://www.tutorialspoint.com/json/

{"name": "brett", "country": "Australia"}

Above HTML code will generate following screen, where you can check AJAX in action:

Cricketer Details

Name

Country

Sachin

India

When you click on Update Detail button, you should get a result something as follows, you can try it yourself JSON with AJAX provided your browser supports Javascript.

Cricketer Details

Name

Country

brett

Australia

<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>
<script>
var JSONObject= {
"name":"John Johnson",
"street":"Oslo West 555",
"age":33,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</body>
</html>

JSON Object Creation in JavaScript

Name: John Johnson
Age: 33
Address: Oslo West 16
Phone: 555 1234567

Much Like XML

JSON is plain text
JSON is "self-describing" (human readable)
JSON is hierarchical (values within values)
JSON can be parsed by JavaScript
JSON data can be transported using AJAX

Much Unlike XML

No end tag
Shorter
Quicker to read and write
Can be parsed using built-in JavaScript eval()
Uses arrays
No reserved words

Why JSON?

For AJAX applications, JSON is faster and easier than XML:
Using XML

Fetch an XML document
Use the XML DOM to loop through the document
Extract values and store in variables

Using JSON

Fetch a JSON string
eval() the JSON string

Json with JavaScript

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>First Name: <span id="fname"></span></p>

<script>
var employees = [
{ "firstName" : "John" , "lastName" : "Doe" },
{ "firstName" : "Anna" , "lastName" : "Smith" },
{ "firstName" : "Peter" , "lastName" : "Jones" }, ];
employees[1].firstName="Jonatan";
document.getElementById("fname").innerHTML=employees[1].firstName;
</script>

</body>
</html>

Create Object from JSON String

First Name: Jonatan

function loadFlickr(flickrid)
{
 // Display a loading icon in our display element
 $('#feed').html('<span><img src="images/lightbox-ico-loading.gif" /></span>');

 // Request the JSON and process it
 $.ajax({
  type:'GET',
  url:"http://api.flickr.com/services/feeds/photos_public.gne",
  data:"id="+flickrid+"&lang=en-us&format=json&jsoncallback=?",
  success:function(feed) {
   // Create an empty array to store images
   var thumbs = [];

   // Loop through the items
   for(var i=0, l=feed.items.length; i < l && i < 16; ++i) 
   {
    // Manipulate the image to get thumb and medium sizes
    var img = feed.items[i].media.m.replace(
     /^(.*?)_m\.jpg$/, 
     '<a href="$1.jpg"><img src="$1_s.jpg" alt="" /></a>'
    );

    // Add the new element to the array
    thumbs.push(img);
   }

   // Display the thumbnails on the page
   $('#feed').html(thumbs.join(''));

   // A function to add a lightbox effect
   addLB();
  },
  dataType:'jsonp'
 });
}

Guide for Developers

Saturday 20 July 2013

JSON Tutorial

JSON Object Creation in JavaScript

Much Like XML

Much Unlike XML

Why JSON?

Create Object from JSON String

No comments:

Post a Comment

C# LINQ Joins With SQL

Ad

Guide for Developers