We are on a mission to address the digital skills

gap for 10 Million+ young professionals, train

and empower them to forge a career path into
future tech
JSON
JULY, 2023
 Agenda

• Introduction

• JSON Structure

• JSON Data types

• JSON Vs. XML

• JSON Schema

• Add-ons

• Data Transmission
3 JSON | © SmartCliff | Internal | Version 1.0
 Introduction
What? Why?

4 JSON | © SmartCliff | Internal | Version 1.0

 Introduction

JSON

• JSON stands for JavaScript Object Notation.

• JSON is a lightweight data-interchange format. i.e. it’s a text-based data exchange format that is used

in web services and other connected applications.

• It is easy for humans to read/write and also it is easy for machines to parse and generate.

• It is based on a subset of the JavaScript Programming Language Standard ECMA-262 3rd Edition -

December 1999.

• It’s syntax is from JavaScript but portable with other languages.

5 JSON | © SmartCliff | Internal | Version 1.0

 Introduction

Why JSON?

• Provide support for all browsers and can be used with modern programming languages.

• Easy to read and write because of it’s straightforward syntax.

• Supported by all major JavaScript frameworks

• Supported by most backend technologies

• JSON is recognized natively by JavaScript

• JSON is often used as a common format to serialize and deserialize data in applications that
communicate with each other over the Internet.

• JSON is text which can be converted to any object of JavaScript into JSON and send this JSON to the
server.

6 JSON | © SmartCliff | Internal | Version 1.0

 Introduction

Chronicle of JSON

• Douglas Crockford specified the JSON format in the early 2000s.

• The official website was launched in 2002.

• In December 2005, Yahoo! starts offering some of its web services in JSON.

• JSON became an ECMA international standard in 2013.

• The most updated JSON format standard was published in 2017.

7 JSON | © SmartCliff | Internal | Version 1.0

 Introduction

Features of JSON

• Readability: The JSON data format is very easy to read since it is made up of data formats that have

already been implemented by many other programming languages.

• Size: The size of data in JSON is very less, tons of JSON data would add up to a few Megabytes of

data. It is a lightweight data that is text-based.

• Independent: The JSON language is independent of data that is entered, it does not depend on other

languages to be implemented.

• Less Verbose: JSON has a more dense style when compared to languages like XML.

8 JSON | © SmartCliff | Internal | Version 1.0

 Introduction

Features of JSON

• Clean JSON: Creates clean, and compatible JSON result that is easy to read.

• Faster: JSON makes use of fewer data resources which reduces the cost of the server load and

increases the parsing speed of the data.

• Structured Data: JSON uses a map data structure to store data. The key or value pairs can restrict

your task, but you will get a predictable and easy-to-understand data model.

• Free tool: JSON library is open source and free to use.

• Easy to use: JSON API offers high-level facade, which helps you to simplify commonly used use-

cases.
9 JSON | © SmartCliff | Internal | Version 1.0
 JSON Structure
Introduction

10 JSON | © SmartCliff | Internal | Version 1.0

 JSON Structure

Structure of JSON

• JSON defines only two data structures: objects and arrays.

• Object: A collection of name/value pairs.

• Unordered set of data

• In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or

associative array.

• Begins and ends with ‘{‘ , ‘}’ respectively.

• Every property will like ‘name:value’ and is separated with comma.

11 JSON | © SmartCliff | Internal | Version 1.0

 JSON Structure

Structure of JSON

• Array: An ordered list of values.

• In most languages, this is realized as an array, vector, list, or sequence.

• Begins and ends with ‘[‘ , ‘]’ respectively.

• Values are separated by comma.

Note: Most of the languages support these 2 data structures

12 JSON | © SmartCliff | Internal | Version 1.0

 JSON Structure

Example

{
"languages":
- Objects
[
{
- Array
"name":"java",
"ver": 9.0
}, In this case, “Languages” array holds 2 objects.
{
"name":"python",
"ver": 3.0
}
]
}

13 JSON | © SmartCliff | Internal | Version 1.0

 JSON Data types
Introduction

14 JSON | © SmartCliff | Internal | Version 1.0

 JSON Data types

Data Types

• JSON primarily accepts six data types.

• Numbers - It includes real number, integer, floating number or an exponent of base 10.

o Numbers can not be Hexadecimal or Octal format in JSON.

o Number values will be used without double-quotes (“ ”).

o Example: 1, -10, 1.5, 1.23e+10

• String - It consists of any text or Unicode double-quoted with backslash escapement

o Example: “Randy”, “\u05d9”, ”\B”

• Boolean - The Boolean data type represents either True or False values

15 JSON | © SmartCliff | Internal | Version 1.0

 JSON Data types

Data Types

• Null - The Null value denotes that the associated variable doesn’t have any value

• Object - It is a collection of key-value pairs and always separated by a comma and enclosed in curly
{
brackets. "id": 110,
o Example: "language": "Python",
"price": 1900,
}
• Array - It is an ordered sequence of values separated.
{
o Array should be used when the key names are sequential integers. "ids" : [
{"id" :
o Example: { 1},
"ids" : (OR) {"id" :
2},
["1","2","3"] {"id" : 3}
16 JSON | © SmartCliff | Internal | Version} 1.0
]
}
 JSON Data types

First JSON File

{ ],
"trainees": “courses":
[ [
{ {
"firstName": "John", "name": "Java",
"lastName": "Smith", "id":1
"age": 21 },
}, {
{ "name": "JavaScript",
"firstName": "Jane", "id":2
"lastName": "Randy", }
"age": 20 ]
training.json
} }

17 JSON | © SmartCliff | Internal | Version 1.0

 JSON Vs. XML
Introduction

18 JSON | © SmartCliff | Internal | Version 1.0

 JSON Vs. XML

JSON Vs. XML

{ <?xml version="1.0" encoding="UTF-8" ?>

"student": [
<root>
{ <student>
"id":"01", <id>01</id>
"name": "Tom", <name>Tom</name>
"lastname": "Price"
<lastname>Price</lastname>
},
</student>
{ <student>
"id":"02", <id>02</id>
"name": "Nick",
<name>Nick</name>
"lastname": "Thameson"
} <lastname>Thameson</lastname>
] </student>
} JSON XML
</root>

19 JSON | © SmartCliff | Internal | Version 1.0

 JSON Vs. XML

Similarities

• Self Describing – Both human and machine readable.

• Hierarchical – Can specify values with values.

• Can be used by lots of programming languages.

• Supported in many browsers.

• Both can be fetch with XMLHttpRequest

20 JSON | © SmartCliff | Internal | Version 1.0

 JSON Vs. XML

Differences

JSON XML

Data is readily accessible as JSON objects XML data needs to be parsed.

JSON has no display capabilities. XML provides a capability to display data because it
is a markup language.

JSON is shorter and quicker. XML is long and little slower

Retrieving value is easy Retrieving value is difficult

A fully automated way of deserializing/serializing Developers have to write JavaScript code to

JavaScript. serialize/de-serialize from XML

Comments are not supported Comments are supported

JSON supports only UTF-8 encoding XML supports many encoding formats.

21 JSON | © SmartCliff | Internal | Version 1.0

 JSON Schema
Introduction

22 JSON | © SmartCliff | Internal | Version 1.0

 JSON Schema

Challenges

• Though JSON brings some benefits, it can become a problem when consuming and integrating data

from different JSON services since developers need to be aware of the structure of the data.

• It becomes necessary to discover at least partially the underlying structure in order to properly process

the data.

• Solution: web developers must often interact with APIs publishing a set of JSON-based services.

• Problem–1: They need to understand and manage the JSON documents returned by those services.

• Problem–2: They need to compose several JSON-based services since their implicit structure can

differ.
23 JSON | © SmartCliff | Internal | Version 1.0
 JSON Schema

Challenges

• Another challenge is the lack of data validation and integrity.

• It does not enforce data types, constraints, or relationships, which means that data can be inconsistent,

incomplete, or duplicated across the database.

• This can lead to data quality issues and errors in data analysis and reporting.

• It can quickly become complex and difficult to manage, especially when dealing with nested structures.

• One more challenge is the complexity of data querying and manipulation.

Rescuer is the JSON Schema

24 JSON | © SmartCliff | Internal | Version 1.0

 JSON Schema

Schema

• JSON Schema is the vocabulary that enables JSON data consistency,

validity, and interoperability at scale.
Request
• JSON Schema is a declarative language that can be used to annotate and
Validate Format
validate the structure, constraints, and data types of the JSON documents.
Process
• It provides a way to standardize and define expectations for the JSON data.
Output
• Using JSON Schema, you can define rules and constraints that JSON data
Validate Format
should adhere to.
Response
• When your JSON documents adhere to these constraints, it becomes easier
to exchange structured data between applications because the data follows a
consistent pattern.

25 JSON | © SmartCliff | Internal | Version 1.0

 JSON Schema

Schema Definition

• To create a basic schema definition, define the following keywords:

• $schema: specifies which draft of the JSON Schema standard the schema adheres to.

• $id: sets a URI for the schema. You can use this unique URI to refer to elements of the schema from

inside the same document or from external JSON documents.

• title and description: state the intent of the schema. These keywords don’t add any constraints to

the data being validated.

• type: defines the first constraint on the JSON data. In the product catalog example below, this

keyword specifies that the data must be a JSON object.

26 JSON | © SmartCliff | Internal | Version 1.0
 JSON Schema

Example

{ "type": "number" "type": "number"

"$schema": "http://json- } }
schema.org/draft-04/schema#", }, },
"type": "object", "required": [ "required": [
"properties": { "name", "name",
"languages": { "ver" "ver"
"type": "array", ] ]
"items": [ }, }
{ { ]
"type": "object", "type": "object", }
"properties": { "properties": { },
"name": { "name": { "required": [
"type": "string" "type": "string" "languages"
}, }, ]
"ver": { "ver": { }
27 JSON | © SmartCliff | Internal | Version 1.0
 Add - Ons
Introduction

28 JSON | © SmartCliff | Internal | Version 1.0

 Add - Ons

Validations, Beautifier/Formatter, Schema Validator

• Validator:

• https://jsonlint.com/

• https://jsonformatter.curiousconcept.com/

• https://codebeautify.org/jsonvalidator

• Beautifier/Formatter:

• https://codebeautify.org/jsonviewer

• https://beautifytools.com/json-beautifier.php

• Schema Convertor & Validator:

• https://www.liquid-technologies.com/online-json-to-schema-converter

• https://www.liquid-technologies.com/online-json-schema-validator
29 JSON | © SmartCliff | Internal | Version 1.0
 Add - Ons

JSONPath

• JSONPath is a query language for JSON, similar to XPath for XML.

• It allows you to select and extract data from a JSON document.

• You use a JSONPath expression to traverse the path to an element in the JSON structure.

• You start at the root node or element, represented by $, and reach the required element in the JSON
structure to extract data from it.

• You can use either the dot-notation or the bracket-notation to form the expressions.

• Online Tools:

• JSONPath Finder: https://jsonpathfinder.com/

• JSONPath Validator: https://jsonpath.com/

30 JSON | © SmartCliff | Internal | Version 1.0

 Data Conversion
Introduction

31 JSON | © SmartCliff | Internal | Version 1.0

 Data Conversion

JavaScript Object Vs. JSON Object

• JSON is a text-based data exchange format derived from JavaScript that is primarily used in web
services and other connected applications.

• While JSON looks like regular JavaScript, it's better to think of JSON as a data format.

• Though the syntax of JSON is similar to the JavaScript object, JSON is different from JavaScript
objects.

JSON Object JavaScript Object

The key in key/value pair can be without double
The key in key/value pair should be in double quotes.
quotes.

JSON cannot contain functions. JavaScript objects can contain functions.

JSON can be created and used by other languages. JavaScript objects can only be used in JavaScript.

32 JSON | © SmartCliff | Internal | Version 1.0

 Data Conversion

JSON to JavaScript Object

• When retrieving from the JSON, data will be a String only.

• JS function ‘JSON.parse()’ can be used to convert/decode in to JS object

• Syntax: JSON.parse(text,[callback]);

Example - 1:
let json = '{"name": "Peter", "age": 22, "country": "United States"}';
let obj = JSON.parse(json);
console.log(obj);

• Avoid using functions in JSON, the functions will lose their scope, and you would have to use eval() to
convert them back into functions.

33 JSON | © SmartCliff | Internal | Version 1.0

 Data Conversion

JSON to JavaScript Object

Example - 2:
const dateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z$/;
function reviver(key, value) {
if (typeof value === "string" && dateFormat.test(value)) {
return new Date(value);
}
return value;
}
const text = '{ "date": "2016-04-26T18:09:16Z" }';
const dateObj = JSON.parse(text, reviver);
console.log(typeof dateObj.date);

34 JSON | © SmartCliff | Internal | Version 1.0

 Data Conversion

JavaScript Object to JSON

• While developing an application using JavaScript, many times it is needed to serialize/convert the data
to strings for storing the data in a JSON.

• The data has to be in the form of strings.

• This conversion of an object to a string can be easily done with the help of the ‘JSON.stringify()’
method.

• Syntax: JSON.stringify(value[, replacer, space])

Example - 1:
const jsonData = { name: "John", age: 22 };
const jsObj = JSON.stringify(jsonData);
console.log(jsObj);

35 JSON | © SmartCliff | Internal | Version 1.0

 Data Conversion

Local Storage

• The web storage API provides mechanisms for the client’s browser to securely store and easily access
key-value pairs.

• This is useful for storing simple data such as usernames or emails, as well as checking whether a user
can access a particular resource by storing data such as access and refresh tokens.

• LocalStorage is a web storage mechanism that allows us to store data on the client’s browser that
persists even after the browser window is closed.

• Data stored here can be accessed throughout a particular domain.

• ‘localStorage’ object stores the data with no expiration date until the browser cache is cleared.

• localStorage data can only be manipulated by JavaScript.

36 JSON | © SmartCliff | Internal | Version 1.0

 Data Conversion

Example – Read and Write

// Create an object
const userData = {
job: "Programmer",
skills: [ { id: 4200, name: "Angular" }, { id: 3000, name: "React" }, { id: 8080, name: "Vue" }, ],
};
// Store the object into storage
localStorage.setItem("userData", JSON.stringify(userData));

// Retrieve the object from the storage

const data = localStorage.getItem("userData");
console.log("data: ", JSON.parse(data));

37 JSON | © SmartCliff | Internal | Version 1.0

THANK YOU