why we use JSON?

JSON (JavaScript Object Notation) is widely used for data interchange between a server and a web application or
between different systems. There are several reasons why JSON is commonly used:

 Human Readable: JSON is text-based, making it easy for humans to read and write. Its syntax is simple and
straightforward, resembling the structure of JavaScript objects.
 Lightweight: JSON is lightweight compared to other data interchange formats like XML. It is concise and
does not include any markup tags, making it efficient for transmitting data over networks.
 Language Independence: JSON is language-independent, meaning it can be parsed and generated by any
programming language with built-in or third-party libraries for JSON support. This makes it highly versatile
and compatible with a wide range of systems and platforms.
 Easy to Parse: JSON can be easily parsed and converted into native data structures in most programming
languages. This makes it convenient for developers to work with JSON data within their applications.
 Support for Arrays and Objects: JSON supports both arrays and objects, allowing for the representation of
complex data structures. This makes it suitable for representing a wide range of data types and
hierarchical relationships.
 Widely Supported: JSON is supported by a vast array of programming languages, frameworks, and tools. It
has become a de facto standard for data interchange on the web and is widely adopted across various
industries and applications.
 Interoperability: JSON facilitates interoperability between different systems and platforms. It allows data
to be exchanged seamlessly between disparate systems, enabling integration and communication
between various software components.

Overall, JSON's simplicity, readability, lightweight nature, and widespread support make it a popular choice for
data interchange in web development, API design, and other software applications.

what will happen if we don't use JSON format for sending data to server?

If JSON format is not used for sending data to a server, alternative data interchange formats might be employed.
Some common alternatives include XML (eXtensible Markup Language), CSV (Comma-Separated Values), and
custom binary formats. However, the choice of format depends on various factors such as the specific
requirements of the application, compatibility with existing systems, and ease of implementation. Here are some
implications of not using JSON format:

 Complex Parsing: Unlike JSON, other formats like XML may require more complex parsing mechanisms
due to their verbose nature and the presence of markup tags. This can increase the complexity of the
client-side and server-side code responsible for parsing the data.
 Increased Overhead: Formats like XML typically have more overhead in terms of data size compared to
JSON. This can result in increased bandwidth usage and slower data transmission, especially in scenarios
where large amounts of data need to be transferred.

 Limited Language Support: While JSON enjoys broad support across various programming languages and
platforms, other formats may have limited support or require additional libraries for parsing and
generating data. This can introduce dependencies and compatibility issues in the software stack.
 Reduced Readability: Some alternative formats, such as binary formats or custom proprietary formats,
may sacrifice human readability for the sake of efficiency. This can make it challenging for developers to
inspect and debug data exchanged between the client and server.
  Compatibility Issues: Using a non-standard or less widely adopted format may pose compatibility issues
when integrating with third-party services, APIs, or libraries. JSON has become a de facto standard for
data interchange on the web, and deviating from it may require additional effort to ensure compatibility
with existing systems.

Overall, while alternative formats may offer certain advantages in specific use cases, JSON is preferred in many
scenarios due to its simplicity, readability, lightweight nature, and broad support across different technologies.
Choosing an appropriate data interchange format involves considering factors such as interoperability,
performance, ease of implementation, and compatibility with existing systems.

Can we send text data without using JSON or other format?

Yes, you can send text data without using JSON or any other specific format. Text data can be transmitted
in its raw form through various communication protocols such as HTTP, TCP/IP, UDP, etc. However,
sending raw text data without any formatting or structure means that the receiving end must have prior
knowledge of how to interpret and process the data.

Here's a simple example of sending raw text data over HTTP without using JSON:

Client-side (Sending):

Server-side (Receiving):

The server would receive the raw text data and then process it according to its requirements. For instance,
it might save the text to a file, store it in a database, or perform some other action based on the content
of the text.

 While sending raw text data can be straightforward, it also has some drawbacks:
 Lack of Structure: Raw text data lacks any inherent structure or metadata, making it difficult to
parse and process, especially for complex data.
 Limited Interoperability: Without a standardized format like JSON, interoperability between
different systems becomes more challenging. Each system must agree on how to interpret the
raw text data, which can lead to compatibility issues.
 No Built-in Serialization: Unlike JSON or other formats, raw text data does not provide built-in
serialization mechanisms for encoding complex data types such as arrays or objects.
In summary, while it is possible to send text data without using JSON or any other format, doing so may
require additional effort to handle parsing, interpretation, and interoperability. JSON and other structured
formats offer benefits such as built-in serialization, readability, and compatibility, making them preferable
choices in many cases.

can i send Java Script object without using JSON?

Yes, you can send JavaScript objects without using JSON, but it typically requires some form of serialization to
transmit the object's data in a structured format. JSON (JavaScript Object Notation) is commonly used for this
purpose due to its simplicity and compatibility with JavaScript.

However, if you're not using JSON, you might employ alternative serialization methods such as:

 XML (eXtensible Markup Language): XML can be used to serialize JavaScript objects for transmission.
While XML is more verbose than JSON and might require more effort to parse, it's a structured format
that can represent complex data hierarchies.
 Query Strings: Simple JavaScript objects can be serialized into query string format and appended to a URL
for transmission in HTTP requests. This method is limited to representing key-value pairs, making it less
suitable for complex data structures.
 Custom Serialization: You can define your own serialization format tailored to your specific requirements.
This approach allows for flexibility but may require additional effort to implement and maintain, and it
may lack the widespread support and interoperability of established formats like JSON.

Here's an example of sending a JavaScript object using XML:

Alternatively, you could use a custom serialization method or even directly send JavaScript objects within the
context of a JavaScript environment, such as within a Node.js application or between client-side scripts.
While it's possible to send JavaScript objects without using JSON, JSON remains a popular choice due to its
simplicity, readability, and widespread support in web development environments.

is JSON format lighter than JS object?

When comparing the size of a JSON string representation to a JavaScript object in memory, the JSON format is
generally lighter in terms of data transmission over a network. Here's why:

 Text-based: JSON is a text-based format, meaning it consists of human-readable characters representing

the data. On the other hand, a JavaScript object in memory is represented using a more complex data
structure that includes pointers, metadata, and other internal details specific to the JavaScript runtime
environment.
 No Function Definitions or Prototypes: JSON only represents data and does not include function
definitions or prototype chains, which are part of JavaScript objects. This results in a simpler and more
compact representation compared to a JavaScript object.
 Whitespace: JSON strings typically do not include unnecessary whitespace, while a JavaScript object in
memory may contain additional space for memory allocation, pointers, and other runtime-related
information.
 However, it's important to note that when comparing JSON to a JavaScript object in the context of
memory usage within a JavaScript runtime environment (such as a browser or Node.js), the JavaScript
object may be more efficient for direct manipulation and access since it is in its native format.

In summary, while JSON format is generally lighter than a JavaScript object for data transmission over a network
due to its text-based nature and lack of additional runtime-related information, the comparison may differ when
considering memory usage within a JavaScript runtime environment.

JS array

JS object

Stringify()

Parse()

Create a form, send data using JSON, Show in HTML

Show JSON data using API

PHP basic

Database connection

CRUD
JSON stringify() and parse() example

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON data</title>
</head>
<body>

<script src="script.js"></script>
</body>
</html>

Script.js

const post=[
{
userId: 1,
id: 32,
title: "my first title from shamim",
body: "ex quod dolorem ea eum iure qui provident amet\nquia qui facere
excepturi et repudiandae\nasperiores molestias provident\nminus incidunt vero
fugit rerum sint sunt excepturi providen",

},
{
userId: 2,
id: 32,
title: "my first title from toudorp",
body: "ex quod dolorem ea eum iure qui provident amet\nquia qui facere
excepturi et repudiandae\nasperiores molestias provident\nminus incidunt vero
fugit rerum sint sunt excepturi providen",

},
{
userId: 3,
id: 32,
title: "my first title",
 body: "ex quod dolorem ea eum iure qui provident amet\nquia qui facere
excepturi et repudiandae\nasperiores molestias provident\nminus incidunt vero
fugit rerum sint sunt excepturi providen",

},
{
userId: 4,
id: 32,
title: "my first title",
body: "ex quod dolorem ea eum iure qui provident amet\nquia qui facere
excepturi et repudiandae\nasperiores molestias provident\nminus incidunt vero
fugit rerum sint sunt excepturi providen",

},

// console.log(post[0]['title'])
const jsondata = JSON.stringify(post)
console.log(JSON.parse(jsondata))

post.json from https://jsonplaceholder.typicode.com/posts

[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio
reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et
cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem
eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor
beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut
reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
 "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut
ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio
et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem
assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque
ipsam iure\nquis sunt voluptatem rerum illo velit"
},
{
"userId": 1,
"id": 5,
"title": "nesciunt quas odio",
"body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem
sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor
neque"
},
{
"userId": 1,
"id": 6,
"title": "dolorem eum magni eos aperiam quia",
"body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia
nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium
quas\nvoluptate dolores velit et doloremque molestiae"
}
]

To display info from a JSON file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON data</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="root">
 </div>

<script src="script.js"></script>
</body>
</html>

Script.js

// const post=[
// {
// userId: 1,
// id: 32,
// title: "my first title from shamim",
// body: "ex quod dolorem ea eum iure qui provident amet\nquia qui
facere excepturi et repudiandae\nasperiores molestias provident\nminus incidunt
vero fugit rerum sint sunt excepturi providen",

// },
// {
// userId: 2,
// id: 32,
// title: "my first title from toudorp",
// body: "ex quod dolorem ea eum iure qui provident amet\nquia qui
facere excepturi et repudiandae\nasperiores molestias provident\nminus incidunt
vero fugit rerum sint sunt excepturi providen",

// },
// {
// userId: 3,
// id: 32,
// title: "my first title",
// body: "ex quod dolorem ea eum iure qui provident amet\nquia qui
facere excepturi et repudiandae\nasperiores molestias provident\nminus incidunt
vero fugit rerum sint sunt excepturi providen",

// },
// {
// userId: 4,
// id: 32,
// title: "my first title",
// body: "ex quod dolorem ea eum iure qui provident amet\nquia qui
facere excepturi et repudiandae\nasperiores molestias provident\nminus incidunt
vero fugit rerum sint sunt excepturi providen",
// },

// ]

// console.log(post[0]['title'])
// const jsondata = JSON.stringify(post)
// console.log(JSON.parse(jsondata))

fetch('product.json')
.then(response => response.json())
.then(json => {

console.log(json)
productDetail(json)
});

function productDetail(productInfo){

const root = document.getElementById('root')

// root.innerHTML = '<div>hello</div>'

productInfo.forEach(value =>{
root.innerHTML += displayProduct(value);
})

function displayProduct(info){
const {id,title,url} = info;
const html = `
<div>
<h3>${id}</h3>
<h3>${title}</h3>
<img src='${url}'/>
</div>

`;
return html;
}

Style.css

body{
background-color: antiquewhite;
}
#root{
display: flex;

color: red;
}
#root div img{
width: 150px;
height:150px;
margin: 10px;
}