This tutorial is created to provide you with an introduction to working with JSON (JavaScript Object Notation) in JavaScript. JSON is mostly used with AJAX (Asynchronous JavaScript) and XML. It’s a lightweight format to serialize and transmit structured data over a network connection.

JSON for JavaScript is generally used in some of the following scenarios :

Data Storage (Storing Data).

Data Analysis

Data transfer from user / server to relevant medium.

Keys and Values

JSON consist of two primary parts as key and value. Together they make a key/value pair.

Key : It’s always a string enclosed in quotation marks. Value : It can be a string, number, boolean expression, array, or object. Key/Value Pair : It follows a specific syntax, with the key followed by a colon followed by the value. Key/value pairs are comma separated.

Syntax & Structure

{ "key" : "value" }

JSON array consist of many data types. Here is an example of an array with different data type:

[ "Bishrul" , { "id" : "01" , "name" : "BH" }, True, 5.7 ]

The following data types can be used with JSON:

Strings (in double quotes)

Arrays

Numbers

Objects

Booleans (true or false)

null

Working with JSON in JavaScript

Here’s the JSON data we’ll use in this example:

{ "details" : [ { "name" : "Bishrul Haq" , "born" : "1994" }, { "name" : "Bill Gates" , "born" : "1955" }, { "name" : "Dennis Ritchie" , "born" : "1941" }, ] }

In this step, We’ll use JavaScript to take the above JSON data and output it to the HTML document as shown below :

< title > JSON Sample | BH </ title > < script > function displaydetails ( ) { let data = { "details" : [ { "name" : "Bishrul Haq" , "born" : "1994" }, { "name" : "Bill Gates" , "born" : "1955" }, { "name" : "Dennis Ritchie" , "born" : "1941" }, ] } let output = "<h1>Detaills</h1>" ; output += "<ul>" ; for ( let i in data.details) { output += "<li>" + data.details[i].name + " (Born: " + data.details[i].born + ")</li>" ; } output += "</ul>" ; document .getElementById( "detailList" ).innerHTML = output; } window .onload = displaydetails; </ script > < div id = "detailList" > </ div >

Convert a JavaScript object into a String

The JSON.stringify() function converts JS object into a string. Strings are lightweight and it’s faster to use between client to server.

Let’s assign the JSON.stringify() method to following variable output.

< title > JSON Sample | BH </ title > < script > function displaydetails ( ) { let data = { "details" : [ { "name" : "Bishrul Haq" , "born" : "1994" }, { "name" : "Bill Gates" , "born" : "1955" }, { "name" : "Dennis Ritchie" , "born" : "1941" }, ] } let output = JSON .stringify(data); document .getElementById( "detailList" ).innerHTML = output; } window .onload = displaydetails; </ script > < div id = "detailList" > </ div >

To convert a JSON String back into a function, We use JSON.parse() function.It helps to access the data like a regular JavaScript object.

let output = JSON .parse(output);

Nested JSON Objects

In this Step, We’ll use a JSON file with Deeper Nesting. Not only does this file have details about users, but each user has a number of skills. So we need to loop through the users, and also loop through each users’ skills.

< title > JSON Example | BH </ title > < script > function displayUsers ( ) { let data = { "users" : [ { "name" : "Jhon" , "born" : "1994" , "skills" : [ { "skillname" : "Java Programming" , "experience" : "2 Years" }, { "skillname" : "Laravel" , "experience" : "1 Years" }, { "skillname" : "React Native" , "experience" : "3 Years" } ] }, { "name" : "Bishrul Haq" , "born" : "1994" , "skills" : [ { "skillname" : "Android Development" , "experience" : "2 Years" }, { "skillname" : "Angular JS" , "experience" : "1 Years" } ] }, ] }; let output = "<h1>Users</h1>" ; for ( let i in data.users) { output += "<h2>" + data.users[i].name + "</h2>" ; output += "<ul>" ; for ( let j in data.users[i].skills) { output += "<li>" + data.users[i].skills[j].skillname; } output += "</ul>" ; } document .getElementById( "usersList" ).innerHTML = output; } window .onload = displayUsers; </ script > < div id = "usersList" > </ div >

Hope this tutorial helped you! Feel free to drop your opinion at the comment section.