JavaScript

JSON.parse() Method | Explained

JSON or the JavaScript Object Notation is the most widely used data representation when it comes to transferring data over the internet (mostly between the web servers and client-side applications). Working with JSON requires the application to be able to convert the JSON string into a JSON object and vice versa.

When a client-side application requests the web server, it gets a response in the form of a JSON string. To be able to use this data in our application, we need to either use various String operations to get the data from this string or we need to convert this string into a JSON object. For this conversion, JavaScript provides a method called the pare() method.

The Parse() Method

This method is used to parse some string for an object; What is parsing? Parsing is the process of analyzing a string \ textual values against a specific syntax of either a low-level language or a high-level language.

Syntax of the parse() method

The syntax of the parse() method is as:

const varIdentifier = JSON.parse(JSON_STRING);

A JSON string is a JSON format of data with quotation marks on either end

Imagine you have a JSON string that contains the information about a superhero like this:

`{
"name": "Bruce Wayne",
"Super Power": "Super Rich",
"Cars Owned": [
    {
"name": "Murciélago",
"Model": "LP 640",
"Status": "Crashed"
    },
    {
"name": "Aventador",
"Model": " LP 700-4",
"Status": "Seems Driveable after the accident"
    }
  ]
}`

To convert it into a JSON object, we need to parse it into the parse() method like so:

var superHero = JSON.parse(`{
"name": "Bruce Wayne",
"Super Power": "Super Rich",
"Cars Owned": [
    {
"name": "Murciélago",
"Model": "LP 640",
"Status": "Crashed"
    },
    {
"name": "Aventador",
"Model": " LP 700-4",
"Status": "Seems Driveable after the accident"
    }
  ]
}`);

Then we can print out the variable superHero to the console using the console log function:

console.log(superHero);

We get the following result on the console:

Parsing Arrays in the parse() method

If you parse an array inside the parse method then it will return an array object, rather than a javascript or JSON object. To verify this take the following array:

array = '["Google","Bing","Microsoft"]';

Pass into the parse() method with the following line of code:

var demoVar = JSON.parse(array);

Then you can print out the “demoVar” variable onto the console using the following:

console.log(demoVar);

You will get the following output on your screen:

It is clear from the out that it returns an array instead of an object

Date value in the parse() method

You cannot pass a Date value into the parse() method, however, you can define a date value as a string inside the JSON string and then use a conversion technique to change the date from a string back to a Date value. Create a new JSON string using the following lines of code:

var varString = `{

"idName" : "theticktock0",

"lastLoggedIn" : "2022-1-1"

}`

Parse this varString variable into the parse method using the following line:

var varParsed = JSON.parse(varString);

Print this variable to the console using:

console.log(varParsed);

You get the following output:

As you can see from the output, the value of the “lastLoggedIn” is not a data value, to make it into a date value you can use the following line:

varParsed.lastLoggedIn = new Date(varParsed.lastLoggedIn);

Print this variable onto the console once again and you will observe the following result:

As you can notice, this time around, we are getting a Date value rather than a normal string

Conclusion

The web server usually responds to the client’s requests with a JSON string filled with data. To use this data in your application, we need to either use string operations which would make things complicated, or we can convert this JSON string into a javascript object. The parse() method is used to convert the JSON string into a javascript object. In this post, we learned details about the parse() method along with examples.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.