Java script and json

JavaScript and JSON
Front end development tool

Overview
• Required knowledge before working with JS and JSON
• What is JSON?
• Why use JSON?
• JSON vs XML
• Syntax
• Data Types
• Usage
• Simple example

What you should know before working with
JavaScript and JSON.
• JavaScript and JSON is not for a beginner
• JSON is that it is a conversation that happens between
your server and your browser.
• You should be familiar with building online projects and
know how HTML works.

What is JSON?
JSON is ( JavaScript Object Notation ).
• Format for sharing data.
• Derived from JavaScript.
• Language independent
• An alternative to XML

What is JSON?
JSON is NOT ..
• Overly Complex
• A “document” format
• A markup language
• A programming language

Why use JSON?
• Easy to read
Advantage
var person = {
"name":"John",
"age":30,
"attendance":true,
"car":null
}

Why use JSON?
• Easy to parse
Advantage
var person = {
"name":"John",
"age":30,
"attendance":true,
"car":null
}
// returns John
person.name;

Why use JSON?
• Leaner than XML
Advantage
var person = {
"name":"John",
"age":30,
"attendance":true,
"car":null
}
<persons>
<person>
<name>John</name>
<age>30</age>
</person>
</persons>

Why use JSON?
• Easy to read
• Easy to parse
Advantage
• Leaner than XML
• Supported by all major JavaScript frameworks
• Supported by most backend technologies

JSON vs XML
• Self describing, human readable.
• Hierarchical (values within values)
• Can be parsed and used by lots of programming languages
Much like XML

JSON vs XML
• JSON doesn't use end tag
• JSON is shorter
Not like XML
• JSON is quicker to read and write
• JSON can use arrays

Syntax
• Unordered sets of name/value pairs
• Begins with { (left brace)
• Each name is followed by : (colon)
• Name/value pairs are separated by , (comma)
• Ends with } (right brace)

Syntax
var person = {
"name":"John",
"age":30,
"attendance":true,
"car":null
}
JSON Example

Syntax
Arrays in JSON
• An ordered collection of values
• Begins with [ (left bracket)
• Name/value pairs are separated by , (comma)
• Ends with ] (right bracket)

Syntax
var person = {
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}
JSON Array Example

Data Types
• A String
• A Number
• An Array
• An Object (JSON object)
In JSON, values must be one of the following data types:
• A Boolean
• Null

Data Types
Strings in JSON must be written in double quotes.
JSON String
{ "name":"John" }
Numbers in JSON must be an integer or a floating point.
JSON Numbers
{ "age":30 }

Data Types
Objects as values in JSON must follow the same rules as JSON objects.
JSON Objects
{
"employee":{ "name":"John", "age":30, "city":"New
York" }
}
Values in JSON can be arrays.
JSON Arrays
{
"employees":[ "John", "Anna", "Peter" ]
}

Data Types
Values in an array can also be another array, or even
another JSON object:
JSON Arrays
employee = {
"name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus"] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}

Data Types
• JSON Objects: Unordered key/value pairs wrapped in { }
• JSON Arrays: Ordered key/value pairs wrapped in [ ]
• Each key/value pair is separated by a comma (,).
• Keys and values are separated by a colon (:).
Object & Array
• Keys must be strings, and values must be a valid JSON
data type (string, number, object, array, boolean or
null).

Data Types
Values in JSON can be true/false.
JSON Booleans
{ "sale":true }
Values in JSON can be null.
JSON null
{ "middlename":null }

Usage
Anywhere and everywhere!
eTime

Simple example
Parsing JSON
Imagine we received this text from a web server:
'{ "name":"John", "age":30, "city":"New York"}'
Use the JavaScript function JSON.parse() to convert text into a
JavaScript object:
var obj = JSON.parse('{ "name":"John", "age":30,
"city":"New York"}');

Recourses
https://www.w3schools.com/js/js_json.asp
The JSON basics course for Jeff Fox
Javascript and JSON course for Ray Villalobos

Java script and json

Recommended

More Related Content

What's hot (12)

Similar to Java script and json (20)

Recently uploaded (20)

Java script and json