BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

JSON Tutorial: Learn JSON in 10 Minutes

By Chaitanya Singh | Filed Under: JSON

JSON stands for JavaScript Object Notation. JSON objects are used for transferring data between server and client, XML serves the same purpose. However JSON objects have several advantages over XML and we are going to discuss them in this tutorial along with JSON concepts and its usages.

JSON Syntax Rules

JSON syntax follows these rules:

  • Data is specified as name and value pairs. There is colon “:” symbol between name and corresponding value, notice the “firstName” : “Chaitanya” pair in the following example.
  • Multiple data items are separated by commas, notice the firstName, lastName and age are separated by commas.
  • Curly braces are used to hold objects.
  • Square brackets are used to hold arrays.

For example: Let’s have a look at the piece of a JSON data: It basically has key-value pairs.

var chaitanya = {
   "firstName" : "Chaitanya",
   "lastName" : "Singh",
   "age" :  "28"
};

Features of JSON:

  • It is light-weight
  • It is language independent
  • Easy to read and write
  • Text based, human readable data exchange format

Why use JSON?

Standard Structure: As we have seen so far that JSON objects are having a standard structure that makes developers job easy to read and write code, because they know what to expect from JSON.

Light weight: When working with AJAX, it is important to load the data quickly and asynchronously without requesting the page re-load. Since JSON is light weighted, it becomes easier to get and load the requested data quickly.

Scalable: JSON is language independent, which means it can work well with most of the modern programming language. Let’s say if we need to change the server side language, in that case it would be easier for us to go ahead with that change as JSON structure is same for all the languages.

JSON vs. XML

Let see how JSON and XML look when we store the records of 4 students in a text based format so that we can retrieve it later when required.

JSON style:

{"students":[
   {"name":"John", "age":"23", "city":"Agra"},
   {"name":"Steve", "age":"28", "city":"Delhi"},
   {"name":"Peter", "age":"32", "city":"Chennai"},
   {"name":"Chaitanya", "age":"28", "city":"Bangalore"}
]}

XML style:

<students>
  <student>
    <name>John</name> <age>23</age> <city>Agra</city>
  </student>
  <student>
    <name>Steve</name> <age>28</age> <city>Delhi</city>
  </student>
  <student>
    <name>Peter</name> <age>32</age> <city>Chennai</city>
  </student>
  <student>
    <name>Chaitanya</name> <age>28</age> <city>Bangalore</city>
  </student>
</students>

As you can clearly see JSON is much more light-weight compared to XML. Also, in JSON we take advantage of arrays that is not available in XML.

JSON Data Types

JSON allows following data types:

  • string
  • number
  • JSON object
  • array
  • boolean
  • null

String:

{"firstName":"Chaitanya"}

Number:

{"age":35}

JSON object:

{
"student":{"firstName":"Ajeet", "age":32, "country":"India"}
}

Array:

{
"students":["Ram", "Steve", "John", "Peter"]
}

boolean:

{"isValid":true}

JSON data structure types and how to read them:

  1. JSON objects
  2. JSON objects in array
  3. Nesting of JSON objects

1) JSON objects:

var chaitanya = {
  "name" : "Chaitanya Singh",
  "age" : "28",
  "website" : "beginnersbook"
};

The above text creates an object that we can access using the variable chaitanya. Inside an object we can have any number of key-value pairs like we have above. We can access the information out of a JSON object like this:

document.writeln("The name is:  " +chaitanya.name);
document.writeln("his age is: " + chaitanya.age);
document.writeln("his website is: "+ chaitanya.website);

2) JSON objects in array

In the above example we have stored the information of one person in a JSON object suppose we want to store the information of more than one person; in that case we can have an array of objects.

var students = [{
   "name" : "Steve",
   "age" :  "29",
   "gender" : "male"

},
{
   "name" : "Peter",
   "age" : "32",
   "gender" : "male"

},
{
   "name" : "Sophie",
   "age" : "27",
   "gender" : "female"
}];

To access the information out of this array, we do write the code like this:

document.writeln(students[0].age); //output would be: 29
document.writeln(students[2].name); //output: Sophie

You got the point, right? Let’s carry on with the next type.

3) Nesting of JSON objects:

Another way of doing the same thing that we have done above.

var students = {
  "steve" : {
  "name" : "Steve",
  "age" :  "29",
  "gender" : "male" 
},

"pete" : {
  "name" : "Peter",
  "age" : "32",
  "gender" : "male"
},

"sop" : {
  "name" : "Sophie",
  "age" : "27",
  "gender" : "female"
}
}

Do like this to access the info from above nested JSON objects:

document.writln(students.steve.age); //output: 29
document.writeln(students.sop.gender); //output: female

JSON & JavaScript:

JSON is considered as a subset of JavaScript but that does not mean that JSON cannot be used with other languages. In fact it works well with PHP, Perl, Python, Ruby, Java, Ajax and many more.

Just to demonstrate how JSON can be used along with JavaScript, here is an example:
If you have gone though the above tutorial, you are familiar with the JSON structures. A JSON file type is .json

How to read data from json file and convert it into a JavaScript object?
We have two ways to do this.
1) Using eval function, but this is not suggested due to security reasons (malicious data can be sent from the server to the client and then eval in the client script with harmful effects).
2) Using JSON parser: No security issues plus it is faster than eval. Here is how to use it:

var chaitanya = {
"name" : "Chaitanya Singh",
"age" : "28",
"website" : "beginnersbook"
};

We are converting the above JSON object to javascript object using JSON parser:

var myJSObject = JSON.parse(chaitanya);

How to convert JavaScript object to JSON text?
By using method stringify

var jsonText= JSON.stringify(myJSObject);

I guess the 10 minutes are over. Bookmark this page as I will be adding more tutorials on JSON and will add the links to those tutorials here.

Comments

  1. Snehal Agrawal says

    August 18, 2015 at 2:17 PM

    Well explained and it is very easy to grasp. Thanks a lot.

    Reply
    • pratap says

      May 4, 2016 at 6:03 AM

      Well explained and easy to learn.Thanks a lot.it would be very useful for beginners

      Reply
  2. Mallikarjun Terdal says

    September 29, 2015 at 3:39 PM

    Good and simple examples. Very well demonstrated how JSON is light weight than XML

    Reply
    • Shiva says

      April 19, 2016 at 10:31 AM

      Good example, it would be very useful for biginners

      Reply
  3. Sathish says

    December 24, 2015 at 9:02 AM

    As per my understanding, JSON key and value pairs are separated by colon (:). Please change it in you example. It should be
    var chaitanya = {
    “name” : “Chaitanya Singh”,
    “age” : “28”,
    “website” : “beginnersbook”
    };

    Reply
    • Ajay says

      April 1, 2016 at 8:22 AM

      its already there, please check it carefully

      Reply
  4. Beto Galvez says

    January 18, 2016 at 7:35 AM

    I took off my space helmet; thinking I was going to learn rocket-science for ten minutes. It was clear and easy to understand, thank you!

    Reply
  5. Dheeraj says

    March 2, 2016 at 8:32 AM

    Hey chaitanya!Nice content!
    I am new to javascript and json.
    I am creating a UI on bootstrap which displays all files of a particular folder when i click the icon..how do i do that using json?

    Reply
  6. Kiran says

    April 11, 2016 at 11:13 AM

    well explained boss

    Reply
  7. Zaheer says

    May 20, 2016 at 9:28 AM

    Short n Sweet .Superb!

    Reply
  8. Pradip says

    May 23, 2016 at 9:59 AM

    Nice One.. :)

    Reply
  9. Sionline says

    July 7, 2016 at 7:08 AM

    Good Stuff. Thank You

    Keep posting please. Thanks

    Reply
  10. karan says

    July 7, 2016 at 1:18 PM

    explained well and it is very easy to understand ..waiting for your next tutorial

    Reply
  11. Dhruvam says

    August 4, 2016 at 11:50 AM

    Very comprehensive text and very user friendly. Just the basics i needed to cover. Thanks a ton. Hope to see more stuff from you.

    Reply
  12. Muhammad Tughral Khan says

    August 15, 2016 at 11:53 AM

    Nice explained and it is so easy to understand. well carry on.

    Reply
  13. Joe says

    September 14, 2016 at 12:05 AM

    Very nice content and nicely documented. Good job !!

    Reply
  14. veeresh says

    December 18, 2016 at 6:40 PM

    Awesome explanation…..Please add some more article on this.

    Reply
  15. Priya says

    December 19, 2016 at 12:34 PM

    So Precise & crisp that makes it easy for beginners to grasp quickly.Do continue this great work Chaitanya.Thanks !

    Reply
  16. Pavan says

    January 17, 2017 at 7:50 PM

    Very nice content for beginners. Great job (y)

    Reply
  17. Bob Green says

    March 9, 2017 at 10:00 AM

    Simply brilliant! Clearly written and explained. Looking forward to the next installment. I would like to see how to extract a single key-value pair from an object or an array. Also how to reference an individual array element.

    Reply
  18. Dilshad says

    March 26, 2017 at 5:58 AM

    Nicely demonstrated in short duration :)

    Reply
  19. kajal says

    April 23, 2017 at 6:02 PM

    Each and every part is clearly explained and thanks for exploring your views

    Reply
  20. nocturnal says

    July 23, 2017 at 5:51 PM

    GAINING My confidence back in coding :)
    thank you so much , loved every bit of it <3

    Reply
  21. Gopikrishna says

    June 29, 2018 at 2:48 AM

    Crisy and clear. Easy to understand anyone without a programming knowledge. waiting for more stuff.

    Reply
  22. Ishika Sachdev says

    January 12, 2020 at 3:27 PM

    Thankyou so much for this brief information.It is very clear to understand.Can you please post the tutorials on how json works with some popular languages like java,python,C,perl,Ajax,ruby,C++,and so on..I will be very grateful to u if u would do so.

    Reply
  23. Kaushal Soni says

    January 20, 2020 at 11:47 AM

    This article is very useful for us.Now i have cleared my doubts about JSON.
    The way of explaining the concept is very fantastic. I hope so we are going to get more articles on different different technologies.

    Reply
  24. Nikunj says

    February 13, 2020 at 11:07 AM

    Always look through codes written by our devs to get a grip on JSON but your article made it much clear to me in a few minutes..Many Thanks

    Reply
  25. Bruce M says

    March 7, 2020 at 9:17 PM

    Thank-you! 10 Minutes well spent. Great intro to the topic.

    Reply
  26. VickyS says

    May 1, 2020 at 4:16 AM

    We want more Tutorial For Json…When U Post…..

    Reply
  27. Arun says

    June 9, 2020 at 9:46 AM

    Is wonderful tutorial to start JSON. I saw few JSON code in one golang framework examples , which was very confusing , hence I searched for a tutorial and came here, this tutorial helped to clear the doubts . Expecting more such tutorials !!!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap