JSON - JavaScript
Object Notation
Prepared by: Web
Team
What is JSON?
Selling your idea
- JSON is a Syntax for storing and exchanging
data. It’s a lightweight data-interchange format
- It means JavaScript Object Notation.
- And it’s a text, written with JavaScript Object
Notation.
- JSON is “self-describing” and easy to
understand. Also it’s language independent
since text can be read and used as a data
format by any programming language.
Exchanging Data? How?
Selling your idea
- When exchanging data between a browser and
a server, data can only be text.
- Since JSON is a text, so we can convert any
JavaScript Object into JSON and then send off to
a server.
Exchanging Data? How?
Selling
-
your idea
Not just converting JavaScript Object into JSON,
we also can reverse the converting from JSON
into JavaScript Object.
- By this way, we can work with Data as
JavaScript Object, with no complicated Parsing
and Translating.
Sending data:
Selling your idea
function login(username, pwd) {
var userObject = { "name" : username, "password" : pwd }
$.ajax({
url: "http://api-ams.me/v1/api/authentication",
type: "POST",
data: JSON.stringify(userObject),
success: function(response) {
console.log(“Successfully”);
},
error: function(error) {
console.log(“Error”);
}
})
}
Receiving data:
Selling your idea
function loadUser(id) {
$.ajax({
url: "http://api-ams.me/v1/api/users/"+id,
type: "GET",
success: function(response) {
console.log(response.data);
},
error: function(error) {
console.log(“Error”);
}
})
}
Why use JSON?
Selling
-
your idea
Since the JSON format is text only, it can easily
be sent to and from a server as seen in
example above. Besides, JSON is used as a data
format by any programming language.
- In JavaScript, JSON.parse() is a built-in function
to convert a string - written in JSON format, into
native JavaScript object.
JSON Syntax:
Selling
-
your idea
The JSON syntax is a subset of the JavaScript
syntax.
Rule:
➔ Data is in name/value pairs
➔ Data is separated by commas
➔ Curly braces hold objects
➔ Square brackets hold arrays
JSON Data - A name and a value
Selling
-
your idea
JSON data is written as name/value pairs. A
name/value pairs consists of a field name (in
double quotes), followed by a colon, followed
by a value:
Example: "username" : "Jung"
Note: JSON names required double quotes.
JavaScript names don’t.
JSON - Evaluates to JavaScript Objects
Selling
-
your idea
The JSON format is almost identical to
JavaScript objects.
JSON: JavaScript
{ "username" : "Jung" } { username : "Jung" }
JSON Value/Data Type
Selling your idea
- In JSON, values must be - In JavaScript, values can
one of the following data also be:
types:
➔ Function
➔ String ➔ Date
➔ Number ➔ Undefined
➔ Object (JSON object)
➔ Array
➔ Boolean
➔ Null
JSON Data Types
Selling your idea
JSON Strings: { "username":"Jung" JSON Boolean:
} { "gender":true }
JSON Numbers: { "age":28 } JSON Null: { "children":null }
JSON Objects: { "data":
{ "username":"Jung",
"Age" : 28}
}
JSON Arrays: { "employees":
[ "John", "Anna",
"Peter" ] }
JSON Objects
Selling your idea
Syntax: { "name" : "value" }
- JSON objects are surrounded by curly braces
{ }.
- JSON objects are written in key/value pairs.
- Keys must be strings, and values must be a
valid JSON data type (string, number, object,
array, boolean or null).
- Keys and values are separated by a colon.
- Each key/value pair is separated by a comma.
JSON Objects - Accessing Object Values
Selling
-
your idea
You can access the object values by using dot
(.) notation:
Example: var username = data.name
JSON Objects - Looping an Object
Selling
-
your idea
You can loop thru object properties by using for-
in loop:
Example:
user = { "name":"Jung", "age":28, "house":null };
for (x in user) {
document.getElementById("demo").innerHTML
+= x;
}
JSON Files
Selling
➔
your idea
The file type for JSON files is “.json “
➔ The MIME type of JSON text is “application/json”
➔ MIME - Multipurpose Internet Mail Extensions
➔ Link: https://en.wikipedia.org/wiki/MIME
Good luck!
Thank you!
