Scribd
Upload
8 views

jQuery

This is detailed unit on jQuery

Uploaded by

Nilesh Pawar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

jQuery

This is detailed unit on jQuery

Uploaded by

Nilesh Pawar
Copyright
© © All Rights Reserved
Available Formats
Download as 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