JSON

JSON stands for JavaScript Object Notation

JSON is a lightweight data-interchange format

JSON is plain text written in JavaScript object notation

JSON is used to send data between computers

JSON is language independent *

The JSON syntax is derived from JavaScript object notation, but the JSON format is text only.

Code for reading and generating JSON exists in many programming languages.

The JSON format was originally specified by Douglas Crockford.

The JSON format is syntactically similar to the code for creating JavaScript objects. Because of this, a
JavaScript program can easily convert JSON data into JavaScript objects.

Since the format is text only, JSON data can easily be sent between computers, and used by any
programming language.

JavaScript has a built in function for converting JSON strings into JavaScript objects:

JSON.parse()

JavaScript also has a built in function for converting an object into a JSON string:

JSON.stringify()

Storing Data

When storing data, the data has to be a certain format, and regardless of where you choose to store
it, text is always one of the legal formats.

JSON makes it possible to store JavaScript objects as text.

JSON Syntax

The JSON syntax is a subset of the JavaScript syntax.

JSON Syntax Rules

JSON syntax is derived from JavaScript object notation syntax:

Data is in name/value pairs

Data is separated by commas

Curly braces hold objects

Square brackets hold arrays

JSON Data - A Name and a Value

JSON data is written as name/value pairs (aka key/value pairs).

A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a
value:

Example

"name":"John"

JSON - Evaluates to JavaScript Objects

The JSON format is almost identical to JavaScript objects.

In JSON, keys must be strings, written with double quotes:

JSON

{"name":"John"}

In JavaScript, keys can be strings, numbers, or identifier names:

JavaScript

{name:"John"}

JSON Values

In JSON, values must be one of the following data types:

a string

a number

an object

an array

a boolean

null

In JavaScript values can be all of the above, plus any other valid JavaScript expression, including:

a function

a date

undefined

In JSON, string values must be written with double quotes:

JSON

{"name":"John"}

In JavaScript, you can write string values with double or single quotes:

JavaScript

{name:'John'}

JavaScript Objects
Because JSON syntax is derived from JavaScript object notation, very little extra software is needed
to work with JSON within JavaScript.

With JavaScript you can create an object and assign data to it, like this:

Example

person = {name:"John", age:31, city:"New York"};

You can access a JavaScript object like this:

Example

// returns John
person.name;

It can also be accessed like this:

Example

// returns John
person["name"];

Data can be modified like this:

Example

person.name = "Gilbert";

It can also be modified like this:

Example

person["name"] = "Gilbert";

JSON vs XML

Both JSON and XML can be used to receive data from a web server.

The following JSON and XML examples both define an employees object, with an array of 3
employees:

JSON Example

{"employees":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Jones" }
]}

XML Example

<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
 </employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>

JSON is Like XML Because

Both JSON and XML are "self describing" (human readable)

Both JSON and XML are hierarchical (values within values)

Both JSON and XML can be parsed and used by lots of programming languages

Both JSON and XML can be fetched with an XMLHttpRequest

JSON is Unlike XML Because

JSON doesn't use end tag

JSON is shorter

JSON is quicker to read and write

JSON can use arrays

The biggest difference is:

XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function.

XML is much more difficult to parse than JSON.

JSON is parsed into a ready-to-use JavaScript object.

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

JSON.Parse the JSON string

What are the uses of JSON?

 JSON is used when writing javascript based application which incudes browser extension and
websites.
 JSON, data exchange format is used for serializing and transmitting structured data above
network connection.
 This is mainly used to transmit data between server and web application.
 Web services and APIs use JSON format to offer public data.
 JSON can be used with modern programming languages.
JSON Data Types

Valid Data Types

In JSON, values must be one of the following data types:

a string

a number

an object (JSON object)

an array

a boolean

null

JSON values cannot be one of the following data types:

a function

a date

undefined

JSON Strings

Strings in JSON must be written in double quotes.

Example

{"name":"John"}

JSON Numbers

Numbers in JSON must be an integer or a floating point.

Example

{"age":30}

JSON Objects

Values in JSON can be objects.

Example

{
"employee":{"name":"John", "age":30, "city":"New York"}
}

Objects as values in JSON must follow the JSON syntax.

JSON Arrays

Values in JSON can be arrays.

Example

{
"employees":["John", "Anna", "Peter"]
}

JSON Booleans

Values in JSON can be true/false.

Example

{"sale":true}

JSON null

Values in JSON can be null.

Example

{"middlename":null}

JSON.parse()

A common use of JSON is to exchange data to/from a web server.

When receiving data from a web server, the data is always a string.

Parse the data with JSON.parse(), and the data becomes a JavaScript object.

Example - Parsing JSON

Imagine we received this text from a web server:

'{"name":"John", "age":30, "city":"New York"}'

Use the JavaScript function JSON.parse() to convert text into a JavaScript object:

const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

Make sure the text is in JSON format, or else you will get a syntax error.

Use the JavaScript object in your page:

Example

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

Array as JSON

When using the JSON.parse() on a JSON derived from an array, the method will return a JavaScript
array, instead of a JavaScript object.

Example
const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

JavaScript Objects

You can create a JavaScript object from a JSON object literal:

Example

myObj = {"name":"John", "age":30, "car":null};

Normally, you create a JavaScript object by parsing a JSON string:

Example

myJSON = '{"name":"John", "age":30, "car":null}';

myObj = JSON.parse(myJSON);

Accessing Object Values

You can access object values by using dot (.) notation:

Example

const myJSON = '{"name":"John", "age":30, "car":null}';

const myObj = JSON.parse(myJSON);
x = myObj.name;

You can also access object values by using bracket ([]) notation:

Example

const myJSON = '{"name":"John", "age":30, "car":null}';

const myObj = JSON.parse(myJSON);
x = myObj["name"];

Looping an Object

You can loop through object properties with a for-in loop:

Example

const myJSON = '{"name":"John", "age":30, "car":null}';

const myObj = JSON.parse(myJSON);

let text = "";

for (const x in myObj) {
text += x + ", ";
}

In a for-in loop, use the bracket notation to access the property values:

Example

const myJSON = '{"name":"John", "age":30, "car":null}';

const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += myObj[x] + ", ";
}

Arrays in JSON are almost the same as arrays in JavaScript.

In JSON, array values must be of type string, number, object, array, boolean or null.

In JavaScript, array values can be all of the above, plus any other valid JavaScript expression,
including functions, dates, and undefined.

JavaScript Arrays

You can create a JavaScript array from a literal:

Example

myArray = ["Ford", "BMW", "Fiat"];

You can create a JavaScript array by parsing a JSON string:

Example

myJSON = '["Ford", "BMW", "Fiat"]';

myArray = JSON.Parse(myJSON);

Accessing Array Values

You access array values by index:

Example

myArray[0];

Arrays in Objects

Objects can contain arrays:

Example

{
"name":"John",
"age":30,
"cars":["Ford", "BMW", "Fiat"]
}

You access array values by index:

Example

myObj.cars[0];

Looping Through an Array

You can access array values by using a for in loop:

Example

for (let i in myObj.cars) {

x += myObj.cars[i];
}

Or you can use a for loop:

Example

for (let i = 0; i < myObj.cars.length; i++) {

x += myObj.cars[i];
}

Parsing JSON and XML

JSON Parser

The eval() function can compile and execute any javascript. This represent a potential security
problem.

It is safer to use a JSON parser to convert a JSON text to a javascript object. A JSON parser identifies
only JSON text and does not compile scripts.

In browsers that provide native JSON hold, JSON parsers are faster.

Native JSON support is integrated in newer browsers and in the newest ECMAScript (javascript)
standard.

Parsing JSON HttpResponse

If we get HttpResponse as JSON format, then we require to parse it.

The following steps are used to parse JSON.

 Get the content from HttpResponse

HttpEntity he=httpResponse.getEntity();

InputStream is=he.getContent();

 Read the content stored into JSON object

Parsing XML HttpResponse

If we get the HttpResponse as XML format, then we require to parse it. The following fragment is
used to parse the XML.

 Get the content from HttpResponse

HttpEntity he=httpResponse.getEntity();

String xml=EntityUtils.toString(he);

 Convert the response data to document object

DocumentBuilderFactory dbf=DocumentBuilderFactory.newinstance();

DocumentBuilder db=dbf.newDocumentBuilder();

InputSource is=new InputSource();

Document doc=db.parse(is);

 Get element from document object

NodeList nl=doc.getElementsByTagName();

for(i=0;i<nl.getLength();i++)

Element e=nl.item(i);