JSON means JavaScript Object Notation. JSON is used as an interface to connect server/backend to be able to send data to frontend in web technology or vice-versa. Not just only in web, Server/API/Backend also can use JSON to response data to Mobile. In this slide I explain what JSON is and show its data type and usage. Hope you like it. Ms. Panda

1. JSON - Javascript
Object Notation
Prepared by: Ms Panda

2. Selling your idea
What is JSON?
- 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.

3. Selling your idea
Exchanging Data? How?
- 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.

4. Selling your idea
Exchanging Data? How?
- 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.

5. Selling your idea
Sending data:
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”);
}
})
}

6. Selling your idea
Receiving data:
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”);
}
})
}

7. Selling your idea
Why use JSON?
- 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.

8. Selling your idea
JSON Syntax:
- 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

9. Selling your idea
JSON Data - A name and a value
- 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.

10. Selling your idea
JSON - Evaluates to Javascript Objects
- The JSON format is almost identical to Javascript
objects.
JSON:
{ "username" : "Jung" }
JavaScript
{ username : "Jung" }

11. Selling your idea
JSON Value/Data Type
- In JSON, values must be one
of the following data types:
➔ String
➔ Number
➔ Object (JSON object)
➔ Array
➔ Boolean
- In JavaScript, values can also
be:
➔ Function
➔ Data
➔ Undefined

12. Selling your idea
JSON Data Types
JSON Strings: { "username":"Jung" }
JSON Numbers: { "age":28 }
JSON Objects: { "data":{
"username":"Jung",
"Age" : 28}
}
JSON Arrays: { "employees":[
"John", "Anna", "Peter" ] }
JSON Boolean: { "gender":true }
JSON Null: { "children":null }

13. Selling your idea
JSON Objects
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.

14. Selling your idea
JSON Objects - Accessing Object Values
- You can access the object values by using dot (.)
notation:
Example: var username = data.name

15. Selling your idea
JSON Objects - Looping an Object
- 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;
}

16. Selling your idea
JSON Files
➔ 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

17. Good luck!
Thank you!