WELCOME
MIDHUNSUDHAKAR
midhusudhakaran@gmail.com
Midhun.sudhakar.73@facebook.com
twitter.com/midhunopus
in.linkedin.com/pub/midhunsudhakar/86/a65/a9b/Phonenumber
9995586182
JSON
Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
document of baabtra –Mentoring Partner
Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
Contents
 WHAT IS JSON?
 JSON ADVANTAGES
 JSON STRUCTURE
 SYNTAX OF JSON
 JSON OR XML?
JSON
JavaScript Object Notation
 Lightweight data-sharing format.
 Derived from the JavaScript.
 Language independent.
 An alternative to XML
JSON
advantages
easy for humans to read and write
JSON's structure is simple.
Better Parsing efficiency.

JSON
Structure
JSON is built on two structures:
 A collection of name/value pairs.
realized as objects.
 An ordered list of values.
realized as array.
JSON Objects
{ "firstName":"John" , "lastName":"Doe" }
This is also simple to understand, and equals to the JavaScript
statements:
firstName = "John";
lastName = "Doe";
JSON Arrays
JSON arrays are written inside square brackets.
An array can contain multiple objects:
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
sample program
<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p>
Name: <span id="jname"></span><br>
Age: <span id="jage"></span><br>
street: <span id="jstreet"></span><br>
Phone: <span id="jphone"></span><br>
</p>
<script>
var JSONObject = {
"name":"Baabtra",
"street":"calicut",
"age":33,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name;
document.getElementById("jage").innerHTML=JSONObject.age;
document.getElementById("jstreet").innerHTML=JSONObject.street;
document.getElementById("jphone").innerHTML=JSONObject.phone;
</script>
</body>
</html> clIck me
JSON ➡ Native data form for
JavaScript
JSON XML
Data is readily accessible
as JSON objects
XML data needs parsing
Retrieving values from JSON is as easy
as importing an object in
JavaScript
Needs to use tedious DOM APIs and
processing power to assign to variables.
JSON VS XML
THANK YOU
Want to learn more about programming or Looking to become a good programmer?
Are you wasting time on searching so many contents online?
Do you want to learn things quickly?
Tired of spending huge amount of money to become a Software professional?
Do an online course
@ baabtra.com
We put industry standards to practice. Our structured, activity based courses are so designed
to make a quick, good software professional out of anybody who holds a passion for coding.
Follow us @ twitter.com/baabtra
Like us @ facebook.com/baabtra
Subscribe to us @ youtube.com/baabtra
Become a follower @ slideshare.net/BaabtraMentoringPartner
Connect to us @ in.linkedin.com/in/baabtra
Give a feedback @ massbaab.com/baabtra
Thanks in advance
www.baabtra.com | www.massbaab.com |www.baabte.com
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
Cafit Square,
Hilite Business Park,
Near Pantheerankavu,
Kozhikode
Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com
Contact Us

Json

  • 2.
  • 3.
  • 4.
    Disclaimer: This presentationis prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  • 5.
    Contents  WHAT ISJSON?  JSON ADVANTAGES  JSON STRUCTURE  SYNTAX OF JSON  JSON OR XML?
  • 6.
    JSON JavaScript Object Notation Lightweight data-sharing format.  Derived from the JavaScript.  Language independent.  An alternative to XML
  • 7.
    JSON advantages easy for humansto read and write JSON's structure is simple. Better Parsing efficiency. 
  • 8.
    JSON Structure JSON is builton two structures:  A collection of name/value pairs. realized as objects.  An ordered list of values. realized as array.
  • 9.
    JSON Objects { "firstName":"John", "lastName":"Doe" } This is also simple to understand, and equals to the JavaScript statements: firstName = "John"; lastName = "Doe";
  • 10.
    JSON Arrays JSON arraysare written inside square brackets. An array can contain multiple objects: { "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }
  • 11.
    sample program <!DOCTYPE html> <html> <body> <h2>JSONObject Creation in JavaScript</h2> <p> Name: <span id="jname"></span><br> Age: <span id="jage"></span><br> street: <span id="jstreet"></span><br> Phone: <span id="jphone"></span><br> </p> <script> var JSONObject = { "name":"Baabtra", "street":"calicut", "age":33, "phone":"555 1234567"}; document.getElementById("jname").innerHTML=JSONObject.name; document.getElementById("jage").innerHTML=JSONObject.age; document.getElementById("jstreet").innerHTML=JSONObject.street; document.getElementById("jphone").innerHTML=JSONObject.phone; </script> </body> </html> clIck me
  • 12.
    JSON ➡ Nativedata form for JavaScript JSON XML Data is readily accessible as JSON objects XML data needs parsing Retrieving values from JSON is as easy as importing an object in JavaScript Needs to use tedious DOM APIs and processing power to assign to variables.
  • 13.
  • 14.
  • 15.
    Want to learnmore about programming or Looking to become a good programmer? Are you wasting time on searching so many contents online? Do you want to learn things quickly? Tired of spending huge amount of money to become a Software professional? Do an online course @ baabtra.com We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.
  • 16.
    Follow us @twitter.com/baabtra Like us @ facebook.com/baabtra Subscribe to us @ youtube.com/baabtra Become a follower @ slideshare.net/BaabtraMentoringPartner Connect to us @ in.linkedin.com/in/baabtra Give a feedback @ massbaab.com/baabtra Thanks in advance www.baabtra.com | www.massbaab.com |www.baabte.com
  • 17.
    Emarald Mall (BigBazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com Contact Us