Scribd
Upload
3 views27 pages

CA-104 (B) JSON

JSON (JavaScript Object Notation) is a lightweight, language-independent data-interchange format that is easy to understand and manipulate. It is often compared to XML, being lighter and faster, but lacks features like namespaces and validation. JSON is commonly used for data transfer between a server and a client, and can be easily parsed and generated in JavaScript.

Uploaded by

Nilesh
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
3 views27 pages

CA-104 (B) JSON

JSON (JavaScript Object Notation) is a lightweight, language-independent data-interchange format that is easy to understand and manipulate. It is often compared to XML, being lighter and faster, but lacks features like namespaces and validation. JSON is commonly used for data transfer between a server and a client, and can be easily parsed and generated in JavaScript.

Uploaded by

Nilesh
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/ 27

JSON

Overview

What is JSON?

Comparisons with XML

Syntax

Data Types

Usage

Live Examples
What is JSON?
JSON is…

JavaScript Object Notation

A lightweight text based data-interchange


format

Completely language independent

Based on a subset of the JavaScript


Programming Language

Easy to understand, manipulate and generate


JSON is NOT…

Overly Complex

A “document” format

A markup language

A programming language
Why use JSON?

Straightforward syntax

Easy to create and manipulate

Can be natively parsed in JavaScript using


eval()

Supported by all major JavaScript


frameworks

Supported by most backend technologies


JSON vs. XML
Much Like XML

Plain text formats

“Self-describing“ (human readable)

Hierarchical (Values can contain lists of


objects or values)
Not Like XML

Lighter and faster than XML

JSON uses typed objects. All XML values are


type-less strings and must be parsed at
runtime.

Less syntax, no semantics

Properties are immediately accessible to


JavaScript code
Knocks against JSON

Lack of namespaces

No inherit validation (XML has DTD and


templates, but there is JSONlint)

Not extensible

It’s basically just not XML


Syntax
JSON Object Syntax

Unordered sets of name/value pairs

Begins with { (left brace)

Ends with } (right brace)

Each name is followed by : (colon)

Name/value pairs are separated by ,


(comma)
JSON Example

var employeeData = {
"employee_id": 1234567,
"name": "Jeff Fox",
"hire_date": "1/1/2021",
"location": "Norwalk, CT",
"consultant": false
};
Arrays in JSON

An ordered collection of values

Begins with [ (left bracket)

Ends with ] (right bracket)

Name/value pairs are separated by ,


(comma)
JSON Array Example

var employeeData = {
"employee_id": 1236937,
"name": "Jeff Fox",
"hire_date": "1/1/2021",
"location": "Norwalk, CT",
"consultant": false,
"random_nums": [ 24,65,12,94 ]
};
Data Types
Data Types: Strings

Sequence of 0 or more Unicode characters

Wrapped in "double quotes“

Backslash escapement
Data Types: Numbers

Integer

Real

Scientific

No octal or hex

No NaN or Infinity – Use null instead.


Data Types: Booleans & Null

Booleans: true or false

Null: A value that specifies nothing or no


value.
Data Types: Objects & Arrays

Objects: Unordered key/value pairs


wrapped in { }

Arrays: Ordered key/value pairs wrapped in


[]
JSON Usage
How & When to use JSON

Transfer data to and from a server

Perform asynchronous data calls without


requiring a page refresh

Working with data stores

Compile and save form or user data for


local storage
Simple Example
JSON Stringify
<!DOCTYPE html>
<html>
<body>

<h2>Create JSON string from a JavaScript object.</h2>

<p id="demo"></p>

<script>
var obj = { name: "John", age: 30, city: "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>
JSON Objects

<!DOCTYPE html>
<html>
<body>

<p>Access a JSON object using dot notation:</p>

<p id="demo"></p>

<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>
JSON Parse

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
var txt = '{"name":"John", "age":30, "city":"New York"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " +
obj.age;
</script>

</body>
</html>

You might also like