Getting start with JSON

What is JSON?

What is JSON?

JSON is text based, lightweight and language-independent data interchange format. It is derived from

ECMAScript Programming Language Standard. JSON contains a small set of formatting rules for portable representation of structured data. 

  • JSON is known as JavaScript Object Notation.
  • The Douglas Crockford specified by formate.
  • It is designed for human-readable data interchange
  • The filename extension is .json
  • JSON Internet Media type is application/json


Uses of JSON 

  • Useful while writing JavaScript based application which has websites and browser extension.
  • JSON format is used for transmitting & serializing structured data over network connection.
  • Transmission of data between web application and server.
  • It is used with most of programming languages.


JSON Example

Below is an data example for JSON 

  "product": "Example JSON",
  "version": 3.1,
  "releaseDate": "2016-07-25T00:00:00.000Z",
  "demo": true,
  "person": {
    "id": 12345,
    "name": "John Doe",
    "phones": {
      "home": "800-123-4567",
      "mobile": "877-123-1234"
    "email": [
    "dateOfBirth": "1980-01-02T00:00:00.000Z",
    "registered": true,
    "emergencyContacts": [
        "name": "Jane Doe",
        "phone": "888-555-1212",
        "relationship": "spouse"
        "name": "Justin Doe",
        "phone": "877-123-1212",
        "relationship": "parent"

Above data can be represented in XML as shown below

<?xml version="1.0" encoding="UTF-8" ?>
<product>Example JSON</product>
	<name>John Doe</name>
		<name>Jane Doe</name>
		<name>Justin Doe</name>

Let's quickly check how to make use of JSON data in your HTML/HTML5 files using JavaScript.

Step 1: Create a html file called json.html and save it in a preferred folder,

Step 2: Enter the source code below in that file

<title>JSON example</title>
<script language="javascript" >
  var tempObject = { "firstName" : "John", "lastName"  : "Doe" };
  document.write("<h1>JSON JavaScript Example</h1>");
  document.write("<h3>First Name = " + tempObject.firstName+"</h3>");  
  document.write("<h3>Last Name = " + tempObject.lastName+"</h3>");  

You will get something like this shown in your browser


JSON example

Moving on, in the next part we will know  a bit more about JSON Syntax




In this tutorial you will learn 

  1. What is JSON
  2. Syntax
  3. Datatypes with JSON
  4. Objects
  5. Schema
  6. XML vs JSON
  7. Using with PHP and Java

This tutorial is a quick walkthrough over the technology


Learning Objectives

Objective of this tutorial is to give you enough information on JSON to get you started with the technology

Author: Subject Coach
Added on: 20th Jul 2015

You must be logged in as Student to ask a Question.

None just yet!