• JavaScript Video Tutorials

JavaScript - JSON.parse() Method

The JavaScript JSON.parse() method is used to parse (or convert) a JSON string into a JavaScript object. In JavaScript "JSON" is a lightweight data interchange format that is widely used for exchanging data between a web server and a client.

The term "Pasring" means converting the string representation of data (in JSON format) into a format that JavaScript can understand, such as an object.

The JSON.parse() method is a static method in JavaScript, which means you can always use it as JSON.parse() no need to create an object instance to invoke it.

Syntax

Following is the syntax of JavaScript JSON.parse() method −

JSON.parse(text, reviver)

Parameters

This method accepts two parameters named 'text' and 'reviver', which are described below −

  • text − The JSON string that you want to parse.

  • reviver (optional) − A function that can transform the resulting object before it's returned. You can use this function to modify specific properties or values during parsing.

Return value

This method returns a JavaScript object, array, string, number, boolean, or null value corresponding to the given JSON text.

Examples

Example 1

When we omit the "reviver" parameter and pass only the "text" parameter to this method, it will convert the text (JSON string) into an object.

In the following program, we are using the JavaScript JSON.parse() method to convert a text (JSON string) {"name": "Rahul", "age": 23, "city": "Hyderabad"} into a JavaScript object.

<html>
<head>
   <title>JavaScript JSON.parse() Method</title>
</head>
<body>
   <script>
      
      //JSON string
      const student = '{"name": "Rahul","age": 23, "city": "Hyderabad"}';
      document.write("Before parse(JSON string): ", student);
      document.write("<br>Object (after parse JSON string): ");
      
      //using the JSON.parse() method
      var obj = JSON.parse(student);
      document.write("<br>Name: ", obj.name);
      document.write("<br>Age: ", obj.age);
      document.write("<br>City: ", obj.city);
   </script>
</body>
</html>

Output

The above program returns an object after parsing the given JSON string.

Before parse(JSON string): {"name": "Rahul","age": 23, "city": "Hyderabad"}
Object (after parse JSON string):
Name: Rahul
Age: 23
City: Hyderabad

Example 2

If we pass both the "text" and "reviver" parameters to this method, it will convert the JSON string and transform the resulting object based on the reviver function.

Here's another example of using the JavaScript JSON.parse() method. We use this method to convert the given JSON string {"1": 2, "2": 4, "3": 5, "4": 8} into an object. Additionally, we'll use a reviver function to transform the resulting object so that it returns keys and their respective values in a modified structure.

<html>
<head>
   <title>JavaScript JSON.parse() Method</title>
</head>
<body>
   <script>
      
      //JSON string
      const numbers = '{"1": 2,"2": 4, "3": 5, "4": 8}';
      document.write("Before parse(JSON string): ", numbers, "<br>");
      document.write("Object (after parse JSON string): <br>");
      
      var obj = JSON.parse(numbers, (key, value) => {
         document.write("key = ", key, " Value = ", value, "<br>");
      });
   </script>
</body>
</html>

Output

After executing the above program, it will return keys and their corresponding values of an object.

Before parse(JSON string): {"1": 2,"2": 4, "3": 5, "4": 8}
Object (after parse JSON string):
key = 1 Value = 2
key = 2 Value = 4
key = 3 Value = 5
key = 4 Value = 8
key = Value = [object Object]

Example 3

Let's modify the specific value of the converted object using the reviver function.

In the example below, we use the JSON.parse() method to convert the given JSON string students = '[{}]' into an object. We then define a function named increaseAge(). This function increases the age of each student by 5. Finally, we pass this function to the JSON.parse() method to retrieve a formatted output with the updated ages.

<html>
<head>
   <title>JavaScript JSON.parse() Method</title>
</head>
<body>
   <script>
      
      //JSON string 
      const students = '[{"name": "Rahul", "age": 23, "city": "Hyderabad"}, {"name": "Vikash", "age": 22, "city": "Lucknow"}, {"name": "Shikha", "age": 21, "city": "Lucknow"}]';
      document.write("Before parse (JSON string): <br>", students);
      
      //Define a reviver function
      function increaseAge(key, value){
         if(key == "age"){
            return value+5;
         }
         return value;
      }

      var obj = JSON.parse(students, increaseAge);
      document.write("<br>", obj[0].name , " updated age: ", obj[0].age);
      document.write("<br>", obj[1].name , " updated age: ", obj[1].age);
      document.write("<br>", obj[2].name , " updated age: ", obj[2].age);
   </script>
</body>
</html>

Output

Once the above program is executed, it will return an object with the updated students ages.

Before parse (JSON string):
[{"name": "Rahul", "age": 23, "city": "Hyderabad"}, 
{"name": "Vikash", "age": 22, "city": "Lucknow"}, 
{"name": "Shikha", "age": 21, "city": "Lucknow"}]
Rahul updated age: 28
Vikash updated age: 27
Shikha updated age: 26
Advertisements