How to change JSON String into an Object in JavaScript ?

In this article we are going to learn how to change JSON String into an object in javascript, JSON stands for JavaScript object notation. It is the plain format used frequently as a communication medium on the internet. It appears close to OOP language like JavaScript but cannot be accessed like JavaScript. It consists of properties enclosed within flower braces.

Syntax:

{
    "prop1" : "value1",
    "prop2" : "value2"
     ...
}

In JavaScript, we write the same JSON content in the form of a string, and hence we cannot access the properties described in the JSON string as we do in objects.

const jsonString = ‘{“bookname” : “geekforneveropen”, “author” : “bharat”, “releaseYear” : “2001”}’;

This is what the JSON string looks like, we cannot manipulate it as it is immutable and hence we need to convert it purely into a JavaScript object so that we can access each individual property with a JavaScript object access method.

There are several methods that can be used to change JSON String into an Object.

• Using JSON.parse()
• Using String.prototype.replace() with a regex pattern
• Using Function() constructor
• Using JSON.parse() with a try-catch block

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using JSON.parse()

The JSON.parse() method in JavaScript is used to parse a JSON string which is written in a JSON format and returns a JavaScript object.

Syntax:

JSON.parse( string, function )

Example: In this example, we have a JSON string representing book details. We use JSON.parse() to convert it into a JavaScript object.

{ bookname: 'geekforneveropen', author: 'bharat', releaseYear: '2001' }

Approach 2: Using String.prototype.replace() with a regex pattern

In this approach The regex pattern / “(\w+)”\s*:/g matches property names in double quotes, removing any spaces before colons. replace() corrects the JSON string, enabling JSON.parse() to create a JavaScript object.

Syntax:

const jsonObject = JSON.parse(jsonString.replace(/"(\w+)"\s*:/g, '"$1":'));

Example: In this example, The regex pattern / “(\w+)”\s*:/g matches property names in double quotes and removes spaces before colons. replace() corrects the JSON string, enabling JSON.parse() to create a JavaScript object.

{ bookname: 'geekforneveropen', author: 'bharat', releaseYear: '2001' }

Approach 3: Using Function() constructor

In this approach, the Function() constructor creates a function that returns a JavaScript object parsed from the jsonString. It then executes the function, stores the result in jsonObject, and logs it to the console

Syntax:

let variable = new Function(arg1, arg2..., Function Body)

Example: In this example, we create a function using the Function() constructor that returns the evaluated JSON string as a JavaScript object.

{ bookname: 'geekforneveropen', author: 'bharat', releaseYear: '2001' }

Approach 4: Using JSON.parse() with a try-catch block

Using JSON.parse() with a try-catch block provides error handling when parsing JSON strings into JavaScript objects. It prevents the code from breaking due to invalid JSON.

Syntax:

try {
    const jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);
} catch (error) {
    console.error('Error parsing JSON:', error);
};

Example: In this example, we parse the JSON string into a JavaScript object using JSON.parse(). If successful, it logs the object; otherwise, it catches and logs the error.

{ bookname: 'geekforneveropen', author: 'bharat', releaseYear: '2001' }