DEV Community

Cover image for JSON in a Nutshell!
Khusboo Bothra
Khusboo Bothra

Posted on

JSON in a Nutshell!

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"}
Enter fullscreen mode Exit fullscreen mode

Example :

{"first":"Marcus" , "age":"20" , "degree":"Btech"}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Console :

{first: "Marcus", age: "20", degree: "Btech"}
{"first":"Marcus" , "age":"20" , "degree":"Btech"}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

How can you access this two-level deep data?

document.getElementById("main").innerHTML = myObject.Marcus.age; //Output:20 
Enter fullscreen mode Exit fullscreen mode

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"}
    ]}
Enter fullscreen mode Exit fullscreen mode

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]);
    }
}
Enter fullscreen mode Exit fullscreen mode

Console :

John
Ken
23
George
Adams
22
Marcus
Clay
21
soup
steak
fries
pizza
Enter fullscreen mode Exit fullscreen mode

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?

Top comments (0)