jQuery parseJSON() method

The jQuery parseJSON() method takes a JSON string and returns a JavaScript object. The specified JSON string must follow the strict JSON format. Passing an incorrect string will cause a JS exception.

Some of the examples of malformed JSON strings that can cause an exception on passing are given as follows -

{id: 01} // The attribute name id must be double-quoted
{'id': 01} // The attribute name id must be double-quoted instead of single quotation
{"name": 'john'} // The value of the name attribute is a string so, it must be double-quoted instead of single quotation
".7" //A number must start with a digit. We can write "0.7"
"undefined"// We cannot represent undefined in a JSON string

As similar to the above strings, multiple other malformed strings will cause an exception. The JSON standard also does not allow the appearance of control characters (such as tab or newline character) in the string.

Before jQuery version 1.9, if we pass an empty string, null, or undefined, the parseJSON() method returned null instead of throwing an error.

Syntax

This method accepts a single parameter, which is defined as follows -

json: It is the valid JSON string to parse.

Now, let's understand the working of this method using an illustration.

Example

Here, we are passing a well-formed JSON string to the parseJSON() method. We have to click the given button to get the output.

<!DOCTYPE html>
<html>
<head>
<title> jQuery parseJSON() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<style>
#p2 {
color: red;
}
</style>
</head>
<body>

<h1> Welcome to the javaTpoint.com </h1>
<h3> It is an example of using the jQuery parseJSON() method </h3>
<p id = "p1"> </p>
<button> Click me </button>
<p id = "p2"> </p>
<script>
$(document).ready(function(){
var json = '{ "name": "Alex", "age": 23, "city": "Paris"}';
var emp = jQuery.parseJSON(json);
$("#p1").html("The passed JSON string is: <b>" + json + "</b>");
$("button").click(function() {
$("#p2").html("<b> Name: </b>" + emp.name + "<br> <b> Age: </b>" + emp.age + "<b> <br> City: </b>" + emp.city);
});
});
</script>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -