JavaScript

How to Receive and Parse JSON Data from the Server

JSON is a popular data format utilized to exchange information between servers and web applications. The data that you receive from a server is in the form of a “string,” and you can use the “JSON.parse()” method for converting the string into a JavaScript object.

This write-up will explain the usage of the JSON.parse() method in JavaScript. Moreover, the examples related to the JSON.parse() method for parsing strings, arrays, date objects, and functions will be demonstrated. So, let’s start!

What is JSON.parse() Method

The JSON.parse() method accepts a string as an argument and converts it into a JavaScript object by parsing. Here, parsing is the process that divides the strings into different parts and then identifies their relationship with one another.

Syntax of JSON.parse() Method

JSON.parse( string, function )

The above-given syntax states that the JSON.parse() method accepts “string” written in valid JSON format, and “function” is an optional parameter added for transforming the results.

Example: JSON.parse() Method for parsing string in JavaScript

In the following example, we will parse the data using JSON.parse() method. First of all, we will store the received data in a “string1” variable as a string:

const string1 = '{"name":"Alex", "age":25, "city":"Paris"}'

In the next step, we will invoke the JSON.parse() method for converting “string1” into an “obj” object:

const obj = JSON.parse(string1);

You can also check the type of “string1” and “obj” by using the “typeof()” function:

console.log(typeof(string1));
console.log(typeof(obj));

Lastly, we will access the values of the “name” and “age” properties from the converted object and show it as output:

console.log(obj.name + ", " + obj.age);

You can utilize any online coding sandbox or your favorite code editor for executing the provided JavaScript program; however, we will use the Visual Studio Code:

We will run the above-given program using the “Live Server” extension of VS Code. It will display “Alex” as “name” and its age as “25” and also shows the type of “string1” and “obj” in the console window:

JSON.parse() Method for parsing Array in JavaScript

In JavaScript, the JSON.parse() method can be invoked on a JSON object that is derived from an array As a result of it, this method returns a JavaScript array rather than an object.

Example: JSON.parse() Method for parsing Array in JavaScript

In the below-given example, we will parse an array by calling the JSON.parse() method. We will create an object “myArray” by parsing the JSON “text” string:

const text = '[ "Apple", "Mango", "Pear", "Plum" ]';
const myArray = JSON.parse(text);

Then, we will get the content of the Array element and display it in the paragraph:

console.log(myArray[0]);

The element present at the index “0” of “myArray” can be seen in the output:

JSON.parse() Method for parsing Date in JavaScript

JSON syntax does not permit you to use the date objects. If you want to create a date object in your JavaScript program, you have to add it as a string, which can be converted back into a date object.

Example: JSON.parse() Method for parsing Date in JavaScript

In the below-given example, we have included “birthDate” in the “text” string:

const text = '{"name":"Alex", "birthDate":"1998-01-25", "city":"Paris"}';

By invoking the JSON.parse() method, we parse the “text” string:

const obj = JSON.parse(text);


Then, in the next step, we will convert the parsed string back to the date object in the following way:

[cc lang="javascript"  width="100%" height="100%" escaped="true" theme="blackboard" nowrap="0"]
obj.birth = new Date(obj.birthDate);
console.log(obj.name + ", " + obj.birth);

Here is the output we got from executing the above-given code:

JSON.parse() Method for parsing Functions in JavaScript

Similar to the date object, functions are also not allowed in the JSON format. For including a function in JSON.parse() method, you have to add it as a string and then convert it to a function.

Example: JSON.parse() Method for parsing Functions in JavaScript

We will parse functions using the JSON.parse() functions in the below-given example. Firstly, we will add a string that comprises a function for the “age” property and will return “25”:

const text = '{"name":"Alex", "age":"function() {return 25;}", "city":"Paris"}';

Then, we will parse the “text” and create a JSON object for storing the value:

const obj = JSON.parse(text);

After doing so, we will utilize the “eval()” JavaScript function for evaluating the age string as JavaScript code and for its execution:

obj.age = eval("(" + obj.age + ")");

Lastly, we will get the “obj.name” and “obj.age” values and display it in the added paragraph:

console.log(obj.name + ", " + obj.age());

The given output shows that added function is parsed successfully by utilizing the JSON.parse() method.

Conclusion

In JavaScript, the JSON.parse() method is utilized for parsing the string, which is the data received from the webserver. JSON.parse() method will then return a JavaScript object and you can access the parsed data with the help of it. This write-up explained the usage of the JSON.parse() method in JavaScript. Moreover, the examples related to the JSON.parse() method for parsing strings, arrays, date objects, and functions are also demonstrated in this article.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.