JSON in JavaScript

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.
JSON
  • Keys and Values

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

    1. Key : It's always a string enclosed in quotation marks.
    2. Value : It can be a string, number, boolean expression, array, or object.
    3. 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",            // string
        {                     // object
          "id": "01",
          "name": "BH"
        },
        True,                // Boolean
        5.7                  // number
    ]

    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 :

    <!doctype html>
    <title>JSON Sample | BH</title>
    <script>
        function displaydetails() {
            // JSON Details
            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>";
    
            // Loop through the artists
            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>
    
    <!-- output -->
    <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.

    <!doctype html>
    <title>JSON Sample | BH</title>
    <script>
        function displaydetails() {
            // JSON Details
            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>
    
    <!-- output -->
    <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.

    <!doctype html>
    <title>JSON Example | BH</title>
    <script>
        function displayUsers() {
            // JSON data
            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>";
    
            // Loop through the users
            for (let i in data.users) {
                output += "<h2>" + data.users[i].name + "</h2>";
                output += "<ul>";
    
                // Loop through the user for their skills
                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>
    
    <!-- Output -->
    <div id="usersList"></div>

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