JSON Tutorial for Beginner

JSON stands for JavaScript Object Notation and is defined as a file format. It is used to store information in an organized manner that is easy to access. It provides a collection of data that is a human-readable format and can be accessed logically. Its filename extension for written programming code is .json. The Internet media type for JSON is application/JSON, and its Uniform Type Identifier is public.json.

Why do we use JSON?

pros of using JSON:

  • Support all browsers.
  • Easy to read and write.
  • The syntax is straightforward.
  • Easy creation and manipulation.
  • JavaScript frameworks support it.
  • Most backend technologies support it.
  • It allows the transmission and serial structured data using a network connection.
  • Can be used with modern programming languages.
  • JSON is the text that converts any object of JavaScript into JSON and sends this JSON to the server.

History of JSON

The historical journey of JSON:

  • Douglas Crockford specified the JSON format in the early 2000s.
  • The official website was launched in 2002.
  • In December 2005, Yahoo! starts offering some of its web services in JSON.
  • JSON became an ECMA international standard in 2013.
  • The most updated JSON format standard was published in 2017.

Features of JSON

  • Easy to use – JSON API provides a high-level facade, that simplifies commonly used use-cases.
  • Performance – JSON is quite fast as it consumes very less memory space, which makes it suitable for large object graphs or systems.
  • Free tool – JSON library is open source and free to use.
  • Doesn’t require creating mapping – Jackson API gives default mapping for many objects to be serialized.
  • Clean JSON – Easy to read as it creates clean, and compatible JSON.
  • Dependency – JSON library does not require any other library for processing.

Rules for JSON Syntax

Rules for JSON syntax are:

  • Data must be in name/value pairs.
  • Data must be separated by commas.
  • Curly braces must hold objects.
  • Square brackets hold arrays.

Data Types used in JSON

A list of data types used in JSON is:

Data Type Description
Number The real number, integer, or a floating number are included.
String Text or Unicode double-quoted with backslash escapement are included.
Boolean It represents either True or False values
Null It denotes that the associated variable has no value.
Object It consists of key-value pairs that are separated by a comma and enclosed in curly brackets.
Array It is defined as an ordered sequence of values separated.

Number:

  • The number is a double-precision floating-point format that depends on its implementation method.
  • In JSON Hexadecimal and Octal formats cannot be used.

The following table displays the number types:

Type Description
Integer Number 1-9, and 0. Both positive and negative numbers.
Fraction Fractions like 3
Exponent Exponents like e, e+

Syntax:

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

Example:

var obj = {salary: 2600}

String: It is a series of double-quoted Unicode characters and consists of backslash escaping.

The following table shows various string types:

Type Description
* Used for double quotation typing.
/ Used for solidus.
\ Used for reverse solidus.
B Used to add backspace.
F From feed.
N Creates a new line.
R Used for carriage return.
T Displays horizontal tab.
U Hexadecimal digits.

Syntax:

var json-object-name = { string : “string value”,…..}

Example:

var obj= {name: ‘Andy’}

Boolean

It stores only true or false values.

Syntax:

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

Example:

var obj = {active: ‘true’}

Array

  • It is defined as an ordered collection of values.
  • One must use an array when the key names are sequential integers.
  • It must be enclosed inside square brackets that should be separated by ‘,’ (comma)

Syntax:

[value, …….]

Example: Showing an array storing multiple objects:

{
   "eBooks":[
      {
         "language":"Pascal",
         "edition":"third"
      },
      {
         "language":"Python",
         "edition":"four"
      },
      {
         "language":"SQL",
         "edition":"second"
      }
   ]
}

JASON Object

JSON object is defined as an entity in JSON that is enclosed in curly brackets. It is written in the unordered set of name and value pairs in which the name should be followed by “:” (colon), and the name/value pairs requires to be separated using “,” (comma). It is used when key names are arbitrary strings.

Syntax:

{ string :  value, ….. }

Example:

{
"id": 110,
"language": "Python",
"price": 1900,
}

Whitespace

Whitespace is inserted between a pair of tokens.

Example:

Syntax:

{string:"    ",….}

Example:

var a = " Alex"; var b = "Steve";

Example of JSON

The given example shows how JSON can be used to store information related to programming books along with edition and author name.

{
   "book":[
      {
         "id":"444",
         "language":"C",
         "edition":"First",
         "author":"Dennis Ritchie "
      },
      {
         "id":"555",
         "language":"C++",
         "edition":"second",
         "author":" Bjarne Stroustrup "
      }
   ]
}  

In the below example, JSON defines the first name, last name, and id of a student.

{
  "student": [ 
    
     { 
        "id":"01", 
        "name": "Tom", 
        "lastname": "Price" 
     }, 
    
     { 
        "id":"02", 
        "name": "Nick", 
        "lastname": "Thameson" 
     } 
  ]   
}

Application of JSON:

Below is the list of common applications of JSON:

  • Allows transfer data from a server
  • Sample JSON file format allows transmitting and serializing all types of structured data.
  • Enables performing of asynchronous data calls without the need to do a page refresh
  • Permits transmission of data between a server and web applications.
  • It is used for JavaScript-based applications, including browser extensions and websites.
  • JSON can be used with modern programming languages.
  • It is used for writing JavaScript-based applications, including browser add-ons.
  • The JSON format is used by Web services and Restful APIs to get public data.

JSON VS XML

Let’s have a look at the differences between JSON vs. XML

JSON XML
JSON object has a type. XML data does not have a type.
JSON data types: string, number, array, Boolean. All XML data must be a string
Data is readily accessible as JSON objects. XML data requires to be parsed.
JSON files are more human-readable. XML files are less human-readable.
JSON is supported by most browsers. Cross-browser XML parsing can be difficult.
JSON does not have display capabilities. XML provides the capability to display data.
Retrieving value is easy. Retrieving value is difficult.
Ajax toolkits support it. Ajax toolkit does not support it.
Supports deserializing/serializing JavaScript. Need a JavaScript code to serialize/de-serialize.
Native support for objects. Conventions need to be used to express objects.

JASON EXAMPLE:

Below is a simple JSON example:

{
  "student": [ 
    
     { 
        "id":"01", 
        "name": "Tom", 
        "lastname": "Price" 
     }, 
    
     { 
        "id":"02", 
        "name": "Nick", 
        "lastname": "Thameson" 
     } 
  ]   
}

XML EXAMPLE:

<?xml version="1.0" encoding="UTF-8" ?>
<root>
    <student>
        <id>01</id>
        <name>Tom</name>
        <lastname>Price</lastname>
    </student>
    <student>
        <id>02</id>
        <name>Nick</name>
        <lastname>Thameson</lastname>
    </student>
</root>

Cons of JASON:

  • Sample JSON data file is not a document format.
  • It is not a markup language.
  • A General serialization format is not provided.
  • It does not has a recurring or cyclic structure.
  • It is not an invisible structure.
  • No namespace support, hence poor extensibility
  • Limited development tools support
  • No support for formal grammar definition

Popular JASON Tools:

Important JSON tools:

JSONLint:

JSONLint is an open-source project which is used as a validator and reformatter for JSON. To validate the JSON code all you need to do is copy and paste, directly type, or input the URL in the JSON validator tool to validate your JSON code.

Link: https://jsonlint.com

JSON Editor Online:

JSON Editor Online web-based tool that allows to edit, view, and format JSON. It shows data side by side in a clear, editable code editor software.

Link: https://jsoneditoronline.org/

JSON Minifier Tool:

It is a tool that helps in removing whitespaces and gives a JSON code that takes the least space.

Link: https://www.browserling.com/tools/json-minify

JSON to XML Converter:

JSON to XML converter is a simple and effective tool that helps to convert the JSON code.

Link: https://codebeautify.org/jsontoxml

JSON Formatter:

JSON formatter allows solving the problem by formatting the JSON data to make it easy to read and debug by a human.

Link: https://jsonformatter.curiousconcept.com/