# JSON : Basic Understanding for Beginners
# JSON: JavaScript Object Notation
### 1\. Manually Access Of Object :
file Name: **1_demo.html**
```xml
Json Demo
JSON : Java Script Object Notation
Hello, this is Demo of JSON
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685180742381/c0dec8cd-79f5-4ae1-9285-6252a8a6cb95.png align="center")
### 2.Fetch Single Object From .json / .js file :
```xml
Json Demo
JSON : Java Script Object Notation
Hello, this is Demo of JSON
```
.json file: **1_demouser.json**
```json
{
"name" : "Sandip",
"age" : 19,
"skills" : ["JAVA", "C++", "Python"],
"add" : {
"city": "Jamnagar",
"state" : "Gujarat",
"country" : "India"
}
}
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685180874453/01659dc0-64cf-4185-8513-7b560cb2f47b.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685180934289/ab3e1034-291f-426f-9882-4f14fe51a24e.png align="center")
### 3.Fetch Multiple Object From .json / .js file :
```xml
Json Demo
JSON : Java Script Object Notation
Hello, this is Demo of JSON
```
```json
{
"users": [
{
"name": "Sandip",
"age": 19,
"skills": [
"JAVA",
"C++",
"Python"
],
"add": {
"city": "Jamnagar",
"state": "Gujarat",
"country": "India"
}
},
{
"name": "Jay",
"age": 20,
"skills": [
"C",
"C++",
"Python"
],
"add": {
"city": "Rajkot",
"state": "Gujarat",
"country": "India"
}
},
{
"name": "Hardik",
"age": 21,
"skills": [
"PHP",
"C++",
"Django"
],
"add": {
"city": "Delhi",
"state": "Delhi",
"country": "India"
}
}
]
}
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685181890941/232b3e01-a14f-45dc-9c8b-d6e708b9b36e.png align="center")
Show on the webpage :
```xml
Json Demo
JSON : Java Script Object Notation
Hello,
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685182875435/0b5350ef-87c5-4326-be83-07df161efa98.png align="center")
## Object (Client Side) to .json String (Server Side) &
## .json String (Server Side) to Object (Client Side) :
```xml
Json Demo
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685183683981/00feb0f7-b18b-4622-9e84-2bd8b527423a.png align="center")
## Free Fake API for testing :
## Visit : { [Json PlaceHolder](https://jsonplaceholder.typicode.com/) }
```xml
Json Demo
Todo List
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685184878964/6345292a-7cd2-4d04-bcf7-5beaa8464544.png align="center")