Json - Quick Guide Json - Overview
Json - Quick Guide Json - Overview
JSON - OVERVIEW
JSON or JavaScript Object Notation is a lightweight 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.
Uses of JSON
It is used while writing JavaScript based applications that includes browser extensions and
websites.
JSON format is used for serializing and transmitting structured data over network connection.
Web services and APIs use JSON format to provide public data.
Characteristics of JSON
JSON is easy to read and write.
It is a lightweight text-based interchange format.
JSON is language independent.
{
"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>
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 that produces the
following result −
You can refer to JSON Objects chapter for more information on JSON objects.
JSON - SYNTAX
Let's have a quick look at the basic syntax of JSON. JSON syntax is basically considered as a subset
of JavaScript syntax; it includes the following −
Curly braces hold objects and each name is followed by ':'colon, the name/value pairs are
separated by , comma.
{
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id":"07",
"language": "C++",
"edition": "second"
"author": "E.Balagurusamy"
}
]
}
JSON - DATATYPES
JSON format supports the following data types −
Type Description
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.
Type Description
Syntax
Example
Example showing Number Datatype, value should not be quoted −
String
It is a sequence of zero or more double quoted Unicode characters with backslash escaping.
Type Description
\ reverse solidus
/ solidus
b backspace
f form feed
n new line
r carriage return
t horizontal tab
Syntax
Example
Example showing String Datatype −
var obj = {name: 'Amit'}
Boolean
It includes true or false values.
Syntax
Example
Array
It is an ordered collection of values.
These are enclosed in square brackets which means that array begins with .[. and ends with
.]..
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.
Objects 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
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 a code more readable.
Example shows declaration with and without whitespace −
Syntax
{string:" ",....}
Example
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 integerorfloatingpoint
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 us see the various ways of creating JSON objects
using JavaScript −
Creation of an object with attribute bookname with value in string, attribute price with
numeric value. Attribute is accessed by using '.' Operator −
This is an example that 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>
</head>
<body>
</body>
</html>
Now let's try to open Json Object using IE or any other javaScript enabled browser. It produces the
following result −
Creating Array Objects
The following 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>
"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 using IE or any other javaScript enabled browser. It
produces the following result −
JSON - SCHEMA
JSON Schema is a specification for JSON based format for defining the structure of JSON data. It was
written under IETF draft which expired in 2011. JSON Schema −
Languages Libraries
C WJElement LGPLv3
Python Jsonschema
{
"$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
}
},
Let's the check various important keywords that can be used in this schema −
Keywords Description
$schema The $schema keyword states that this schema is written according to the
draft v4 specification.
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.
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 the complete list of keywords that can be used in
defining a JSON schema. The above schema can be used to test the validity of the following JSON
code −
[
{
"id": 2,
"name": "An ice sculpture",
"price": 12.50,
},
{
"id": 3,
"name": "A blue mouse",
"price": 25.50,
}
]
Verbose
XML is more verbose than JSON, so it is faster to write JSON for programmers.
Arrays Usage
XML is used to describe the 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
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>
Environment
As of PHP 5.2.0, the JSON extension is bundled and compiled into PHP by default.
JSON Functions
Function Libraries
PHP json_encode function is used for encoding JSON in PHP. This function returns the JSON
representation of a value on success or FALSE on failure.
Syntax
Parameters
value − The value being encoded. This function only works with UTF-8 encoded data.
Example
The following example shows how to convert an array into JSON with PHP −
<?php
$arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
echo json_encode($arr);
?>
{"a":1,"b":2,"c":3,"d":4,"e":5}
The following example shows how the PHP objects can be converted into JSON −
<?php
class Emp {
public $name = "";
public $hobbies = "";
public $birthdate = "";
}
$e = new Emp();
$e->name = "sachin";
$e->hobbies = "sports";
$e->birthdate = date('m/d/Y h:i:s a', "8/5/1974 12:20:03 p");
$e->birthdate = date('m/d/Y h:i:s a', strtotime("8/5/1974 12:20:03"));
echo json_encode($e);
?>
PHP json_decode function is used for decoding JSON in PHP. This function returns the value
decoded from json to appropriate PHP type.
Syntax
mixed json_decode ($json [,$assoc = false [, $depth = 512 [, $options = 0 ]]])
Paramaters
json_string − It is an encoded string which must be UTF-8 encoded data.
assoc − It is a boolean type parameter, when set to TRUE, returned objects will be converted
into associative arrays.
Example
The following example shows how PHP can be used to decode JSON objects −
<?php
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
var_dump(json_decode($json));
var_dump(json_decode($json, true));
?>
object(stdClass)#1 (5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
}
array(5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
}
Environment
Before you start encoding and decoding JSON using Perl, you need to install JSON module, which
can be obtained from CPAN. Once you downloaded JSON-2.53.tar.gz or any other latest version,
follow the steps mentioned below −
JSON Functions
Function Libraries
encode_json Converts the given Perl data structure to a UTF-8 encoded, binary string.
from_json Expects a json string and tries to parse it, returning the resulting reference.
convert_blessed Use this function with true value so that Perl can use TO_JSON method on the
object's class to convert an object into JSON.
Perl encode_json function converts the given Perl data structure to a UTF-8 encoded, binary string.
Syntax
or
$json_text = JSON->new->utf8->encode($perl_scalar);
Example
The following example shows arrays under JSON with Perl −
#!/usr/bin/perl
use JSON;
my %rec_hash = ('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
my $json = encode_json \%rec_hash;
print "$json\n";
{"e":5,"c":3,"a":1,"b":2,"d":4}
The following example shows how Perl objects can be converted into JSON −
#!/usr/bin/perl
package Emp;
sub new{
my $class = shift;
my $self = {
name => shift,
hobbies => shift,
birthdate => shift,
};
package main;
use JSON;
my $JSON = JSON->new->utf8;
$JSON->convert_blessed(1);
$e = new Emp( "sachin", "sports", "8/5/1974 12:20:03 pm");
$json = $JSON->encode($e);
print "$json\n";
Perl decode_json function is used for decoding JSON in Perl. This function returns the value
decoded from json to an appropriate Perl type.
Syntax
or
$perl_scalar = JSON->new->utf8->decode($json_text)
Example
The following example shows how Perl can be used to decode JSON objects. Here you will need to
install Data::Dumper module if you already do not have it on your machine.
#!/usr/bin/perl
use JSON;
use Data::Dumper;
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
$text = decode_json($json);
print Dumper($text);
$VAR1 = {
'e' => 5,
'c' => 3,
'a' => 1,
'b' => 2,
'd' => 4
};
Environment
Before you start with encoding and decoding JSON using Python, you need to install any of the JSON
modules available. For this tutorial we have downloaded and installed Demjson as follows −
JSON Functions
Function Libraries
Syntax
Example
The following example shows arrays under JSON with Python.
#!/usr/bin/python
import demjson
json = demjson.encode(data)
print json
[{"a":1,"b":2,"c":3,"d":4,"e":5}]
Syntax
demjson.decode(self, txt)
Example
The following example shows how Python can be used to decode JSON objects.
#!/usr/bin/python
import demjson
json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
text = demjson.decode(json)
print text
{
"President": "Alan Isaac",
"CEO": "David Richardson",
"India": [
"Sachin Tendulkar",
"Virender Sehwag",
"Gautam Gambhir",
],
"Srilanka": [
"Lasith Malinga",
"Angelo Mathews",
"Kumar Sangakkara"
],
"England": [
"Alastair Cook",
"Jonathan Trott",
"Kevin Pietersen"
]
Given below is a Ruby program that will be used to parse the above mentioned JSON document −
#!/usr/bin/ruby
require 'rubygems'
require 'json'
require 'pp'
json = File.read('input.json')
obj = JSON.parse(json)
pp obj
{
"President"=>"Alan Isaac",
"CEO"=>"David Richardson",
"India"=>
["Sachin Tendulkar", "Virender Sehwag", "Gautam Gambhir"],
"Srilanka"=>
["Lasith Malinga ", "Angelo Mathews", "Kumar Sangakkara"],
"England"=>
["Alastair Cook", "Jonathan Trott", "Kevin Pietersen"]
}
JSON WITH JAVA
This chapter covers how to encode and decode JSON objects using Java programming language.
Let's start with preparing the environment to start our programming with Java for JSON.
Environment
Before you start with encoding and decoding JSON using Java, you need to install any of the JSON
modules available. For this tutorial we have downloaded and installed JSON.simple and have
added the location of json-simple-1.1.1.jar file to the environment variable CLASSPATH.
JSON Java
string java.lang.String
number java.lang.Number
true|false ava.lang.Boolean
null null
array java.util.List
object java.util.Map
import org.json.simple.JSONObject;
class JsonEncodeDemo {
obj.put("name", "foo");
obj.put("num", new Integer(100));
obj.put("balance", new Double(1000.21));
obj.put("is_vip", new Boolean(true));
System.out.print(obj);
}
}
On compiling and executing the above program the following result will be generated −
Following is another example that shows a JSON object streaming using Java JSONObject −
import org.json.simple.JSONObject;
class JsonEncodeDemo {
obj.put("name","foo");
obj.put("num",new Integer(100));
obj.put("balance",new Double(1000.21));
obj.put("is_vip",new Boolean(true));
On compiling and executing the above program, the following result is generated −
import org.json.simple.JSONObject;
import org.json.simple.JSONArray;
import org.json.simple.parser.ParseException;
import org.json.simple.parser.JSONParser;
class JsonDecodeDemo {
try{
Object obj = parser.parse(s);
JSONArray array = (JSONArray)obj;
s = "{}";
obj = parser.parse(s);
System.out.println(obj);
s = "[5,]";
obj = parser.parse(s);
System.out.println(obj);
s = "[5,,2]";
obj = parser.parse(s);
System.out.println(obj);
}catch(ParseException pe){
System.out.println("position: " + pe.getPosition());
System.out.println(pe);
}
}
}
On compiling and executing the above program, the following result will be generated −
Field "1"
{"2":{"3":{"4":[5,{"6":7}]}}}
{}
[5]
[5,2]
Many developers use JSON to pass AJAX updates between the client and the 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 the web server. AJAX is
used so that javascript can retrieve these JSON files when necessary, parse them, and perform one
of the following operations −
Store the parsed values in the variables for further processing before displaying them on the
webpage.
It directly assigns the data to the DOM elements in the webpage, so that they are displayed
on the website.
Example
The following code shows JSON with AJAX. Save it as ajax.htm file. Here the loading function
loadJSON is 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);
</script>
<title>tutorialspoint.com JSON</title>
</head>
<body>
<h1>Cricketer Details</h1>
</body>
</html>
Given below is the input file data.json, having data in JSON format which will be uploaded
asynchronously when we click the Update Detail button. This file is being kept in
http://www.tutorialspoint.com/json/
The above HTML code will generate the following screen, where you can check AJAX in action −
CRICKETER DETAILS
Name Country
Sachin India
When you click on the Update Detail button, you should get a result something as follows. You
can try JSON with AJAX yourself, provided your browser supports Javascript.
CRICKETER DETAILS
Name Country
brett Australia
Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/fontdata.js