Scribd
Upload
38 views11 pages

Understanding JSON Structure and Use

The document introduces JSON and explains its syntax and structure. JSON stands for JavaScript Object Notation and is a lightweight format for storing and transporting data. It defines objects containing name/value pairs and arrays that can hold objects. The document also shows how to convert JSON data into a JavaScript object.

Uploaded by

sweeti sah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
38 views11 pages

Understanding JSON Structure and Use

The document introduces JSON and explains its syntax and structure. JSON stands for JavaScript Object Notation and is a lightweight format for storing and transporting data. It defines objects containing name/value pairs and arrays that can hold objects. The document also shows how to convert JSON data into a JavaScript object.

Uploaded by

sweeti sah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

JSON

Introduction

 JSON stands for JavaScript Object Notation


 JSON is a lightweight format for storing and transporting data
 JSON is often used when data is sent from a server to a web page
 JSON is "self-describing" and easy to understand
 This example defines an employees object: an array of 3 employee
records (objects):

{
"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
}
JSON Syntax Rules

• Data is in name/value pairs


• Data is separated by commas
• Curly braces hold objects
• Square brackets hold arrays
JavaScript Object Notation

 The JSON format is syntactically identical to the code for creating


JavaScript objects.
 Because of this similarity, a JavaScript program can easily convert
JSON data into native JavaScript objects.
 JSON Data - A Name and a Value
 JSON data is written as name/value pairs, just like JavaScript object
properties.
 A name/value pair consists of a field name (in double quotes),
followed by a colon, followed by a value:
 "firstName":"John"
 JSON Objects
 JSON objects are written inside curly braces.
 Just like in JavaScript, objects can contain multiple name/value pairs:
 {"firstName":"John", "lastName":"Doe"}
 JSON Arrays
 JSON arrays are written inside square brackets.
 Just like in JavaScript, an array can contain objects:
 "employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
 In the example above, the object "employees" is an array. It contains
three objects.
 Each object is a record of a person (with a first name and a last name).
 Converting a JSON Text to a JavaScript Object
 A common use of JSON is to read data from a web server, and
display the data in a web page.
 For simplicity, this can be demonstrated using a string as input.
 First, create a JavaScript string containing JSON syntax:
 var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
 Then, use the JavaScript built-in function JSON.parse() to convert the
string into a JavaScript object:
 var obj = JSON.parse(text);
 Finally, use the new JavaScript object in your page:
 Example
 <p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
 Try it Yourself »

You might also like