JavaScript

Converting JSON Text to JavaScript Object

A JSON text can easily be interchanged into an object in JavaScript by passing it in the arguments of the JSON prase() method. The ES6 release of JavaScript included the JSON parse() method as part of the JSON object module. Before trying to understand the working of the JSON parse(), the reason for its use must be apparent.

Reason for Converting JSON text into a JavaScript object

JavaScript is a language mostly used for creating webpages, client-side applications, and web servers.

When talking about multiple web servers and clients, the data is transferred in the form of strings. String operations can be a massive delay in the processing speed of the webservers. Therefore, JSON was invented.

However, JSON cannot be transferred over the network as it is. It is converted into a JSON text string before sending the data over the network. When this JSON text is received on the server and the client-side application, it must be converted back to either a JSON object or a JavaScript Object to be processed.

Transforming JSON text/string into a JavaScript object

This is the JSON text that is to be converted into an object of JavaScript:

'{"firstName": "John", "lastName": "Doe", "age": 18, "profession": "Goldsmith", "Salary":"18000", "ownsAHouse": true}';

The above JSON text contains data about a person.

To convert it into a JavaScript object, the very first step is going to be storing this JSON string inside a new variable which is going to be named as person1:

const person1 = '{"firstName": "John", "lastName": "Doe", "age": 18, "profession": "Goldsmith", "Salary":"18000", "ownsAHouse": true}';

After that, we are going to pass this person1 variable into a JSON parse() method and store the result inside a new variable named as jsonObj:

var jsonObj = JSON.parse(person1);

After that, we are simply going to print out the content of the jsonObj variable onto the terminal using the console log function:

console.log(jsonObj);

Executing the program will display the following outcome onto the terminal:

From the output, you can conclude that the JSON.parse() method successfully converted the JSON text into a JavaScript-Object.

Converting JavaScript Object back to a JSON string

To send the data back over the network, the program must convert the JavaScript back to a JSON string. For this, we have the method JSON stringify(). Take the jsonObj variable from the previous example, pass it to the stringify() method, and store the result in a new variable named jsonString as

var jsonString = JSON.stringify(jsonObj);

Then display the content inside the jsonString variable onto the terminal using the console log function:

console.log(
  "The content inside the jsonString variable is as \n",
  jsonString
);

Upon execution, the following result is displayed onto the terminal:

The JavaScript object was successfully converted into a JSON text using the stringify() method

Conclusion

The JSON parse() method is used for the conversion of a JSON text into a JavaScript object and to convert it back into the JSON text, the JSON stringify() method is used. The parse() method belongs to the JSON object module and is released with ES6 JavaScript. Simply take a JSON string, pass it as the argument to the JSON parse() method, and save the returned value in a new variable. In that variable, you will have your JavaScript object.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.