JSON in a Nutshell!
Tags: javascript, codenewbie, learning, beginners
Published: 2020-10-29 09:44:26

JSON stands for **J**ava **S**cript **O**bject **N**otation.



**JSON, a hero!**:superhero:

It is used primarily to transmit data between a server and web application, serving as an alternative to XML.
JSON is language independent; means you can use parse and generate JSON data in other programming languages.


**Structure of JSON:**

- The JSON data is represented as name and value pairs.
- The name and value pair are joined using a colon.
- Each pair is separated by a comma.
- Lastly, the entire thing is wrapped in curly braces.

**Illustration :**
```javascript
{"name":"value" , "name":"value" , "name":"value"}
```
**Example :**
```javascript
{"first":"Marcus" , "age":"20" , "degree":"Btech"}
```

JSON Values :
- a string in double quotes
- a number
- boolean
- null
- an object
- an array

Roundtrip JSON:

When we get data from the server , it comes as a **string** and it can be converted from **string** to an **object** and vice versa.

`JSON.parse()` : The function responsible for converting the string into a JSON object.

`JSON.stringify()` : The function responsible for converting the JSON object into a string .

**Illustration :**
```javascript
var start = {"first":"Marcus" , "age":"20" , "degree":"Btech"}
var myObject = JSON.parse(start);
console.log(myObject);
var myString = JSON.stringify(myObject);
console.log(myString);
```
**Console :**
```
{first: "Marcus", age: "20", degree: "Btech"}
{"first":"Marcus" , "age":"20" , "degree":"Btech"}
```
**Nesting JSON Data :**

Any key-value pair can be replaced by another series of key-value(data) to make it 2 levels deep.

```javascript
var data = '{
"Marcus" : 
{"age":"20", "degree":"Btech"},
"John" : 
{"age":"24", "degree":"Mtech"}
}'
var myObject = JSON.parse(data);
```

How can you access this two-level deep data?
```javascript
document.getElementById("main").innerHTML = myObject.Marcus.age; //Output:20 
```
 It can be repeated any number of times. There is really no limit to how many you can use in real world.



 **Structuring JSON data :**

Creating JSON in an array: 

Below is a `data.json` file containing data:
```javascript
{"names" :[
    {"first":"John","last":"Ken","age":"23"},
    {"first":"George","last":"Adams","age":"22"},
    {"first":"Marcus","last":"Clay","age":"21"}
    ],
    {"items" :[
    {"starter":"soup","main-course":"steak"},
    {"starter":"fries","main-course":"pizza"}
    ]}
```
Displaying JSON using `for` loop:

Below is `main.js` file used for displaying data on web-page:
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET',"data.json",true);
xhr.responseType = 'text';
xhr.send();

xhr.onload = function(){
    if(xhr.status === 200){
    var myStuff = JSON.parse(xhr.responseText);
    }
    for(i=0;i<myStuff.names.length;i++){
        console.log(myStuff.names[i].first);
         console.log(myStuff.names[i].last);
          console.log(myStuff.names[i].age);    
    }
    for(i=0;i<items.length;i++){
        console.log(myStuff.items.starter[i]);
        console.log(myStuff.items.main-course[i]);
    }
}
```

**Console :**
```javascript
John
Ken
23
George
Adams
22
Marcus
Clay
21
soup
steak
fries
pizza
```

That's a wrap!!I hope this helps in understanding JSON in a simpler way.

I shared my writing process.I'd love to hear about yours! Is yours different? What do you like about it? What do you wish you could change?