Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

JSON Tutorial

Posted in javascript interview questions, Json Tutorial, Tutorials

JSON (Javascript Object Notation) is text file stored on a web server. JSON file contains data in text format. It is used to store small amount of data. If your requirement is store huge amount of data then go for a database like MSSQL, MySQL, Oracle etc. JSON is a data store where data is stored in key/value pair format. It is easier to access data from JSON file than XML file.

Below is the syntax for JSON:

Json Syntax

Example:

{
   "name": "John  Michel",
   "age": "28",
   "country": "USA",
   "designation": "Software engineer"
}

This is simple json format. In above example, values are stored in key/value pair format.
Note: JSON is not an object. There is difference between JSON and object in javascript. In JSON, keys and values should be in string format i.e with quotes except number and boolean values.

Example of object:

{
   name: "John  Michel",
   age: 28,
   country: "USA",
  designation: "Software engineer"
}

In above example, keys are not quoted. So this is the main difference between object and json.

Another JSON syntax

{
   "name": "John  Michel",
   "age": "28",
   "country": "USA",
   "designation”: "Software engineer",
   "hobbies": [
                 "cricket",
                 "Listening Music",
                 "LAN Gaming"
              ]
}

In above example, a person can have multiple hobbies. So hobbies is an array. A JSON can contain array.

Arrays in JSON
arrays-in-json

More Complex JSON Structure.

{
    "category-1": {
        "name": "ToothPaste",
        "Products": [
            {
                "name": "colgate",
                "InStock": true,
                "price": "250"
            },
            {
                "name": "Pepsodent",
                "InStock": false,
                "price": "150"
            }
        ]
    },
    "category-2": {
        "name": "Fruit Juice",
        "Products": [
            {
                "name": "Pepsi",
                "InStock": false,
                "price": "110"
            },
            {
                "name": "Sprite",
                "InStock": true,
                "price": "90"
            }
        ]
    },
    "category-3": {
        "name": "Soap",
        "Products": [
            {
                "name": "Lifeboy",
                "InStock": false,
                "price": "110"
            },
            {
                "name": "Cinthol",
                "InStock": true,
                "price": "90"
            }
        ]
    }
}

Retrieve data from JSON.
retrieve-data-from-json

Parameters:

  • url: URL is a string where JSON file is stored
  • data: data is an optional parameter represents key/value pairs that will be sent to the server.
  • Callback: This is called when data is fetched from server.

Example:

Suppose my json file contains below data

{
   "name": "John  Michel",
   "age": "28",
   "country": "USA",
   "designation”: "Software engineer",
   "hobbies": [
                 "cricket",
                 "Listening Music",
                 "LAN Gaming"
              ]
}

Use JQuery $.getJSON method to fetch data.


$.getJSON("http://localhost/data.json", function(data){

           console.log("Name: " + data.name);        // print name
           console.log("Age: " + data.age);                // print age
           console.log("Age: " + data.hobbies[0]);   //  print cricket

 });

In above example, data.json file is stored on your local web server.