JSON Tutorial Basic to Advance

JSON stand for Java Script Object Notation (JSON).

JSON is not a Programming Language. JSON is a data interchange format.

Using JSON we can transfer data between client and server and server to server.

JSON is defined in RFC4627 written in 2006. Internet Engineering Task Force (IETF) published JSON RFC7159 in March 2014.

Later on standard updated on RFC8259 and EMCA 404

JSON media type(MIME type) is application/json

JSON file extension is <code>.json</code>

In JSON data can be in following structure

  • A collection of name/value pair
  • An ordered list of value

These two are the universal data structure supported by approx all programming languages. So data exchange between one language to another is easy by JSON.

JSON string example is as below

Why use JSON?

As JSON format is text only, it can be sent to server and also can received from a server, and also can be used as a data format by any programming language.

If you receive data from a server, in JSON format, you can use it like any other JS object.

JSON Syntax

JSON syntax is derived from JS object notation syntax.

•        Data is in name/value pairs

•        Curly braces hold objects

•        Data is separated by commas

•        Square brackets hold arrays

JSON Data

JSON data is written as name or value pairs.

A name or value pair consists of a field name like this “”, and it will follow by a colon, and also followed by a value:

Example

{“name”:”Ayan” }

JSON – Evaluates to JS Objects

The JSON format is a also JavaScript objects.

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

JSON

{ “name”:”Ayan” }

In JSON, keys can be strings, numbers, or identifier names,

{ name:”Ayan” }

JSON with JavaScript Syntax

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

With JS you can create an object and assign data to it.

Example

Access a JavaScript object

Result

Ayan

produce the same output as above

JSON Values

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

  •   a string 
  •   a number
  • an object
  •   an array

or one of the following literal names

  • false
  • true
  • null
JSON Value
Fig : JSON Value

JSON String Value

String value is represented in quotation any unicode character is used to create string.

like

” ” //empty string
“Ram” //string value
“\”” // use of escape character
“\uXXXX” // unicode value

JSON Numbers

 JSON allows numbers as an integer or a floating point numbers.

Example

25
24.25
3.55
3.1e3

JSON Objects

Values in JSON can be objects. It contains zero or more name value pairs in curly braces seperated by comma

Example

{
“employee”:{ “name”:”Ayan”, “age”:25, “city”:”Mumbai” }
}

JSON Array

JSON Array are surrounded by [ (squrae bracket) and zero or more values or elements are seperated by comma.

The values in array may be of different types.

Example

[“red’,”blue”,”green”, “orange”]

A composite JSON structure is also possible

Here a JSON array contains two objects and each object contains string, number and array values

JSON is purely a data format — it contains only properties, no methods.

  • JSON need a double quotes to be used around strings and property names. Single quotes are not valid in a JSON.
  • A single misplaced colon or comma can cause a JSON file to go wrong, and not working that JSON file. Always be careful to validate any data in JSON. A validate JSON using an application like JSONLint.
  •    JSON can be taken the form of any data type that is valid for inside JSON, not just arrays or objects. So, a single string or a number can be a valid JSON object.
  • Unlike in JavaScript code in which object properties may be unquoted, in JSON, only quoted strings may be used as properties.

Converting between objects and textSection

In JSON can be set the XHR request to convert the JSON response directly into a JS object using:

request.responseType = ‘json’;

But sometimes can be receive a raw JSON string, and  need to convert it to an object.

when try to send a JavaScript object across the network, then need to convert it to JSON (a string) before sending.

These two problems are so common that a built-in JSON object is available, which contains the following two methods:

  • parse(): Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.
  • stringify(): Accepts an object as a parameter, and returns the equivalent JSON string form.

See one example of stringify()

{“name”:”Ram”,”age”:24,”mailIds”:[“[email protected]”,”[email protected]”,”[email protected]”]}

console.table(obj); prints array in tabular format
console.log(obj[0].name); print first objects name
for (var row in obj) will iterate each object and access its properties in name value pair

Example

Sam Ghosh

JSON.parse()

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

parse() is used to convert JSON data to JavaScript values

Server send data as a string. To convert this string to JavaScript object  JSON.parse() method is used

Example – Parsing JSON

This text received from a web server:

‘{ “name”:”Ayan”, “age”:25, “city”:”Mumbai”}’

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

varobj = JSON.parse(‘{ “name”:”Ayan”, “age”:25, “city”:”Mumbai”}’);

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

Example

Create Object from JSON String

Ayan, 25

How to access nested JSON objects

Bajaj Bajaj

JSON Arrays

EXAMPLE

Access an array value of a JSON object

Honda

EXAMPLE

Looping through an array using a for in loop

Honda Bajaj Hero

EXAMPLE

Looping through arrays inside arrays

Nested JSON Objects

Honda Hornet xblade livo Bajaj pulsar neon X5 Hero 500 Panda

See one Example to read JSON data and show in console

Result

Console.table()
Fig: Console.table()

JSON Vs XML

Extensible Markup Language(XML) is a Markup Language.

XML is used to access and transfer the data same like JSON.

XML uses tag to wrap content.

General structure of XML to send send data is as below

For above data JSON is

XML and JSON both are data interchange format.

In XML we have to add additional tags to carry data that is not is JSON no overhead required to carry data in JSON

JSON is based on JavaScript. XML is derived from SGML.

JSON can use Array and objects to represent and carry data. XML uses markup structure to carry data

JSON uses key value pair and array object that allows direct mapping of data structure of appropriate language.

XML allows namespace to avoid name conflicts this is not available in JSON.

JSON Formatter and Validator

JSON Formatter are used to provide structure way to JSON data.

JSON validators are tool that are used to validate JSON data.

Why JSON formatter and validator required.

If you get data from server it is in unformatted way

Like I get JSON data from url

api.openweathermap.org/data/2.5/weather?q=London

This will provide me weather information of London

JSON response from api.openweathermap.org
FIg: JSON response from api.openweathermap.org

Above JSON data is difficult to read we have to format above data to make it readable.

Few online tools that can be used are

JSONLint – The JSON Validator

JSON Formatter & Validator

and many more

put code received from URL to any one validator that validate and structure the data so that it can be readable

Formatted JSON from api.openweathermap.org
Fig: Formatted JSON from api.openweathermap.org