JSON in a Nutshell!

Khusboo Bothra — Thu, 29 Oct 2020 09:44:26 +0000

JSON stands for Java Script Object Notation.

JSON, a hero!🦸

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 :

{"name":"value" , "name":"value" , "name":"value"}

Example :

{"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 :

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.

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?

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:

{"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:

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 :

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?

Forem: Khusboo Bothra

JSON in a Nutshell!