September 26, 2021

How to Parse JSON in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to parse JSON in javascript. JSON stands for javascript object notation. This is a format that is widely used over the internet for exchanging data between the server and client-side application.

JSON is very popular because it is lightweight, easy to read and write, and easy to parse. In javascript, we can easily convert a javascript object to JSON string and JSON string to javascript object.

For the javascript object to JSON string conversion, we can make use of JSON.stringify() method and for JSON string to javascript object conversion, we can make use of JSON.parse() method. We are going to cover both of them in this tutorial.

In the following example, we have one hard-coded JSON string. We will convert it into a javascript object, extract values from it and display them in the input fields.

Similarly, we will enter some data in the input fields and create an object from that data. Later, we will cover that object into a JSON string and display it on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and input ). The div element with a class of container is just a wrapper for the rest of the elements.
We have 2 button elements with an innerText of “JSON to Object” and “Object to JSON”.

We have 3 input fields where we will enter some random data.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <div class="left">
            <button id="btn-jsonObj">JSON to Object</button>
            <input type="text" id="username" placeholder="Username">
            <input type="text" id="email" placeholder="Email">
            <input type="text" id="age" placeholder="Age">
        </div>
        <div class="right">
                <button id="btn-objJson">Object to JSON</button>
                <div id="jsonData"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    justify-content: space-evenly;
}

.left, .right{
    display: flex;
    flex-direction: column;
    height: 250px;
    width: 250px;
    border: 1px solid black;
    padding: 5px;
}

input {
    margin-top: 10px;
    height: 20px;
}

#jsonData {
    padding: 10px;
    overflow-wrap: break-word;    
}

Javascript

We have selected both the button elements and all 3 input elements using the document.querySelector() method and stored them in jsonToObj, objToJson, username, email, and age variables respectively.
We have one global JSON string stored in the data variable.

We have attached the click event listener to both the button elements.
In the event handler function of jsonToObj, we are converting JSON string to javascript object using JSON.parse() method and storing it in the myObj variable. We are extracting values from the object by key and setting them as values of the input fields.
In the event handler function of objToJson, we have created an empty object and stored it in the myObj variable. We are reading values from the input fields one by one using value property and adding them as properties in the object.

We are using JSON.stringify() method to convert the object to JSON string and storing it in the json variable. We are displaying that JSON string in the div element using the innerText property.

let data = `{
    "username": "Peter",
    "email": "peter@gmail.com",
    "age": "27"
}`;

let jsonToObj = document.querySelector('#btn-jsonObj');
let objToJson = document.querySelector('#btn-objJson');
let username = document.querySelector('#username');
let email = document.querySelector('#email');
let age = document.querySelector('#age');

jsonToObj.addEventListener('click', () =>{
    let myObj = JSON.parse(data);
    username.value = myObj.username;
    email.value = myObj.email;
    age.value = myObj.age;
});

objToJson.addEventListener('click', () =>{
    let myObj = {};
    myObj.username =  username.value;
    myObj.email = email.value;
    myObj.age = age.value;

    let json = JSON.stringify(myObj);
    document.querySelector('#jsonData').innerText = json;
});

You May Also Like: