Data Serialization Formats - 2

Introduction to JSON

What is JSON?

JSON stands for JavaScript Object Notation. It is one of the most widely used

data formats in applications and has gained immense popularity as a data interchange
format in web development.

Why JSON?

●​ Easy to understand: Its structure is easy for both humans and machines to
understand
●​ Simple syntax: JSON's concise and straightforward syntax contributes to its
ease of use
●​ Text-based format: Makes it readable and writable with minimal effort
●​ Universal support: Numerous libraries and tools are available in almost every
programming language for parsing and generating JSON data
●​ Platform independent: Ensures seamless communication and compatibility
between different systems regardless of the underlying architecture

JSON Structure

JSON's structure is closely related to JavaScript, making it a subset of the language. It

primarily consists of:

1.​ Key-value pairs

 2.​ Objects

●​ enclosed within curly braces {}

3.​ Arrays

●​ enclosed within square brackets []

Basic Structure Rules:

●​ Objects contain key-value pairs

●​ Each key is followed by a colon (:) separating it from its associated value
●​ Key-value pairs are separated by commas (,)
●​ Arrays contain values separated by commas

JSON Data Types

JSON supports six fundamental data types:

1.​ String: Textual data enclosed in double quotes

●​ Example: "name": "Shreyas"
2.​ Number: Numeric values (integers or floating point numbers)
●​ Example: "age": 40
3.​ Object: Collection of key-value pairs enclosed in curly braces
●​ Example: {"name": "Shreyas", "age": 40, "city": "Bangalore"}
4.​ Array: Ordered list of values enclosed in square brackets
●​ Example: ["value1", "value2", "value3"]
5.​ Boolean: Represents true or false
●​ Examples: "isActive": true, "hasAccess": false
6.​ Null: Denotes the absence of a value
●​ Example: "password": null

What JSON Cannot Contain

JSON strictly follows its defined set of data types. The following are NOT supported:

●​ Functions
 ●​ Dates (must be converted to strings)
●​ Undefined values

Complete JSON Examples

Simple Object Example

Explanation: This shows a basic JSON object with three key-value pairs. Keys are
strings in quotes, followed by a colon, then the value. String values need quotes,
numbers don't.

Employee Object

Explanation: This demonstrates a nested object - the main object has one key
"employee" whose value is another object containing person details.

Boolean and Null Example

Explanation: Shows different data types - string ("ssrao"), null (no value for
password), and booleans (true/false for status flags).

JSON Objects, Arrays, and Nested Structures

JSON Objects

A JSON object is an unordered collection of key-value pairs where:

●​ Each key must be a string

●​ Values can be any valid JSON data type
●​ Key-value pairs are separated by commas
●​ The entire object is enclosed in curly braces

Example:

Explanation: A flat JSON object with three properties. Each property has a string key
and values of different types (two strings and one number).
JSON Arrays

JSON arrays are containers that hold ordered lists of values:

●​ Enclosed within square brackets []

●​ Values can be of any data type
●​ Each value is separated by a comma
●​ Useful for representing lists of similar items

Common Use Cases for JSON Arrays:

1.​ API Responses: Representing lists of user objects, comments, or products

2.​ Front-end Development: Lists of blog posts, comments, or images

3.​ Log Entries: Arrays of errors, events, or actions

Array Example with Employee Data

Explanation: The "employees" key contains an array of two objects. Each object
represents an employee with id, name, and location. Arrays maintain the order of
elements.

Nested JSON

Nested JSON refers to including one JSON object as a value within another JSON
object, or including JSON arrays within other JSON arrays. This creates a hierarchical
structure.

Complex Nested Example - Music Artists

Explanation: This shows deep nesting - an array of artists, where each artist object
contains an array of album objects. Perfect for representing hierarchical relationships.
Use Cases for Nested JSON

1.​ Organizational charts

2.​ Nested configurations

3.​ Tree-like structures

4.​ API responses providing comprehensive information about resources

Parsing JSON

What is JSON Parsing?

Parsing JSON is the essential skill of converting JSON to JavaScript objects and
vice-versa. This is crucial in web development for various scenarios.

Key Scenarios for JSON Parsing

1.​ Data Interchange: Exchanging information between server and web application

2.​ Data Transmission: Structured format for client-server transfers with minimal

payload size

3.​ API Communication: Human-readable format for different systems to

communicate

4.​ Storage and Persistence: Storing data in databases or local storage

5.​ Security: Safely handling data from external sources (Twitter, Facebook

applications)

Converting JSON String to JavaScript Object

Use the [Link]() method:

Explanation: [Link]() takes a JSON-formatted string and converts it to a JavaScript

object. After parsing, you can access properties like [Link] or [Link].

Converting JavaScript Object to JSON String

Use the [Link]() method:

Explanation: [Link]() converts a JavaScript object into a JSON string. This is

essential when sending data to a server or storing it. The output will be:

{"name":"John","age":30}
This method is crucial for:

●​ Preparing JavaScript objects for data transmission

●​ Storage
●​ Sharing across different systems or APIs

Creating JSON Documents for Scenarios

Steps to Create a JSON Document

1.​ Identify Data Elements: Identify entities, attributes, and relationships

2.​ Define Structure: Determine which parts will be objects, arrays, or simple

values

3.​ Use a Text Editor: Notepad, Notepad++, Visual Studio Code

Case Study: Online Bookstore Order System

Essential Data Elements:

Order Information:

●​ Order number (unique identifier)

●​ Date (when order was placed)
●​ Customer details
●​ Order item details
●​ Total amount

Customer Details:

●​ First name
●​ Last name
●​ Email
 ●​ Address

Order Item Details:

●​ bookId (unique identifier)

●​ Title
●​ Author
●​ Quantity
●​ Price

Complete JSON Document Example

Explanation: This comprehensive example shows:

●​ Main "order" object containing all order details

●​ Nested "customer" object with personal information
●​ Deeply nested "address" object within customer
 ●​ "items" array containing multiple book objects
●​ Each book has properties for identification and pricing
●​ "total" field calculating the sum of all items

JSON Applications in Web Programming

1. Twitter API

Twitter provides an API that developers can leverage to extract various data in JSON
format:

●​ Tweets: Individual tweets or stream of tweets

●​ User profiles: Profile information and followers
●​ Search results: Structured search query results
●​ Trends and hashtags: Current trends and associated hashtags

Twitter User JSON Example

Explanation:
 ●​ Outer array contains user objects (could have multiple users)
●​ Each user has basic info (id, username, location)
●​ Numeric data (followers_count) doesn't use quotes
●​ Nested "user" object contains additional profile details
●​ Boolean values (protected, verified) for account status

JSON Constructs Used:

1.​ JSON Object (wrapped in curly braces)

2.​ Key-value pairs (created_at contains the date)

3.​ Nested object (user field)

4.​ JSON array (outermost structure)

5.​ Data types (strings, numbers, booleans)

2. Google Maps Markers

Markers are graphical icons placed on maps representing specific locations.

Google Maps Markers JSON Example

Explanation:
 ●​ "markers" contains an array of location objects
●​ Each marker has a "name" (string) and "location" (array)
●​ Location array contains exactly 2 numbers: [latitude, longitude]
●​ This structure can be used to plot multiple points on a map

Structure Components:

●​ markers array: Contains information about multiple locations

●​ location array: Latitude and longitude coordinates

3. UI-Backend Communication

JSON facilitates communication between user interface and backend server.

Request JSON (UI to Backend)

Explanation:

●​ "action" specifies what operation to perform (addTask)

●​ "data" contains the payload with task details
●​ Clear structure helps backend understand the request

Response JSON (Backend to UI)

Explanation:

●​ "status" indicates if operation succeeded or failed

●​ "message" provides human-readable feedback
●​ "data" returns any relevant information (like the created task ID)
●​ This pattern is standard for API responses

Key Components:

●​ Request: action parameter and data object

●​ Response: status field, message, and additional data

Introduction to YAML

What is YAML?

YAML (YAML Ain't Markup Language) is a human-readable data serialization format

that plays a pivotal role in the design of configuration files.

YAML Syntax Principles

1.​ Indentation-based: Uses spaces or tabs to define structure and hierarchy

2.​ Comments: Start with the hash symbol (#)

 3.​ Mapping: Key-value pairs separated by colon (:)

4.​ Sequences: Lists/arrays denoted by hyphen (-)

Basic YAML Examples

Comments

Explanation: Comments in YAML start with #. They can be on their own line or at the end
of a line. Comments are ignored during processing.

Sequences (Lists)

Explanation: The key "people" has a list value. Each item starts with a hyphen and
space (-). The order is preserved, similar to arrays.

Mapping (Key-Value Pairs)

Explanation:

●​ "person" contains a list of objects

●​ Each object has three properties (name, age, city)
●​ Indentation (2 spaces here) shows hierarchy
●​ Each list item starts with - followed by its properties

Important Note: YAML uses spaces to define structure. Single space vs double
space has different meanings.

YAML Configuration File Example

Explanation:
 ●​ Two main sections: "app" and "database"
●​ Each section contains related configuration
●​ No quotes needed for strings (unless they contain special characters)
●​ Numbers (port: 5432) don't need quotes
●​ Clean hierarchy makes it easy to modify settings

Complex YAML Structure

Explanation: Shows nested structure where "address" is an object within "person".

Indentation clearly shows the relationship between parent and child elements.

Nested Structures in YAML

Explanation:

●​ Multiple nesting levels showcase complex data relationships

●​ "name" and "contact" are nested objects
●​ "roles" is a simple list of strings
●​ "tasks" is a list of objects, each with properties
●​ Consistent indentation (2 spaces per level) maintains clarity

Practical Use Case: Ansible Playbooks

Explanation:

●​ hosts: webservers
○​ targets specific server group
●​ become: true
○​ runs with sudo privileges
●​ tasks
○​ list of actions to perform in order
●​ Each task has a descriptive name and module (apt, copy, service)
●​ notify triggers handlers when changes occur
●​ handlers run only if notified, avoiding unnecessary restarts

Key Points:
 ●​ hosts: Target machines
●​ become: true: Administrative privileges
●​ tasks: Steps to perform
●​ handlers: Event-triggered tasks

YAML vs Other Formats

Compared to JSON:

●​ More human-readable and succinct

●​ Indentation-based structure
●​ Easier to write and understand complex structures

Compared to XML:

●​ Less verbose and simpler

●​ Fewer characters needed
●​ Enhanced readability

YAML for Web Development

YAML in Web Frameworks

YAML is extensively used in web frameworks like Symphony for configuration tasks.

Frontend Build Tools Configuration

Webpack Configuration Example ([Link])

Explanation:

●​ Defines how Webpack should process CSS files

●​ test uses regex pattern to match .css files
●​ use specifies loaders to apply in order (bottom to top)
●​ Much cleaner than equivalent JSON configuration

YAML in RESTful APIs

Example of a person resource in YAML format:

Explanation:
 ●​ Represents same data structure as JSON but more readable
●​ Nested objects (name, address) show hierarchical data
●​ contacts array contains objects with type/value pairs
●​ No brackets or quotes needed, making it cleaner

CI/CD Pipeline Configuration

YAML is extensively used in CI/CD tools like Jenkins, GitLab CI/CD, and GitHub
Actions.

Example CI/CD Pipeline

Explanation:
 ●​ stages defines the pipeline flow order
●​ Each job specifies which stage it belongs to
●​ script contains shell commands to execute
●​ Jobs in the same stage run in parallel
●​ Next stage starts only after previous stage completes successfully

Best Practices for YAML in Web Development

1.​ Versatility: Leverage YAML's versatility across various web development

scenarios

2.​ Simplicity and Clarity: Create clear, concise, and easily understandable

configurations

3.​ Consistency: Maintain consistent YAML syntax across all files

4.​ Documentation: Include comments and explanations within files

5.​ Version Control: Track changes using systems like Git

Key Considerations

●​ Ensure uniform indentation

●​ Use of colons, hyphens, and quotation marks as required
●​ Avoid overly complex structures to maintain readability
●​ Monitor modifications, rollbacks, and collaboration among team members

Summary

JSON Key Points

• Definition: JavaScript Object Notation - a lightweight data interchange format

• Structure: Based on key-value pairs, objects ({}), and arrays ([])
• Data Types: String, Number, Object, Array, Boolean, and Null
• Cannot contain: Functions, Dates (as native type), or Undefined values
• Parsing Methods:

●​ [Link]()
○​ converts JSON string to JavaScript object
●​ [Link]()
○​ converts JavaScript object to JSON string • Common Uses:
●​ API communication (Twitter API, RESTful services)
●​ UI-Backend data exchange
●​ Configuration files
●​ Data storage and persistence • Nested Structures: Objects within objects or
arrays within arrays for hierarchical data

YAML Key Points

• Definition: Human-readable data serialization format (YAML Ain't Markup Language)

• Structure: Indentation-based hierarchy using spaces (not tabs)
• Key Elements:

●​ Comments: Start with #

●​ Mapping: Key-value pairs with :
●​ Sequences: Lists with -

• Advantages over JSON:

●​ More human-readable
●​ Less verbose
●​ Supports comments
●​ Better for configuration files

• Common Uses:

●​ Configuration files ([Link])

●​ CI/CD pipelines (Jenkins, GitLab CI, GitHub Actions)
●​ Ansible Playbooks
●​ API data representation (alternative to JSON)
• Best Practices:

●​ Consistent indentation (spaces matter!)

●​ Clear documentation with comments
●​ Version control tracking
●​ Avoid overly complex nesting

Key Differences: JSON vs YAML

• Syntax: JSON uses brackets and quotes; YAML uses indentation

• Readability: YAML is more human-friendly; JSON is more machine-friendly
• Comments: YAML supports comments; JSON does not
• Verbosity: YAML is more concise; JSON requires more syntax
• Use Cases: JSON for APIs and data exchange; YAML for configuration files