Updated April 3, 2023
Introduction to JQuery JSON Parse
jQuery.parseJSON() method is used to implement parsing of JSON strings in jQuery. This method takes a well-structured JSON string and transforms it to return a resulting JavaScript object. Since JSON is commonly used to exchange data between a client and a server and the data received from the server is always a string, there is a need to convert a string into JSON data. This is possible with jQuery.parseJSON() method. This jQuery method internally uses the JavaScript JSON.parse() method. Shorthand for this method is $.parseJSON().
Syntax
jQuery.parseJSON(json)Where json refers to the JSON string to be parsed.
The above signature returns a JavaScript object after parsing a well-structured JSON string.
How does JQuery JSON Parse Work?
- The basic purpose of using the parseJSON()method is to transform a JSON string to a corresponding JavaScript object.
- JSON is a format for storing and exchanging data between a server and a client (browser).
- Communication between a server and a client occurs only through texts or strings.
- JSON is a string which can be formed by converting JavaScript objects into JSON before being sent to the server.
- Similarly, any JSON received from the server can also be converted to a corresponding JavaScript object using the parseJSON()method.
- If the JSON string is not well-formed in the correct format before passing it to the parseJSON() method, the browser can throw an exception.
For example, {val: 1} does not have double quotes around it
{‘val’: 1} has single quotes around it instead of double quotes
Since these strings are not in the correct JSON format, an exception will be thrown by the jQuery.parseJSON() method while parsing them.
- If null, undefined or an empty string is passed to the parseJSON() method, it returns a null value.
Examples for JQuery JSON Parse
Let us go through a few examples to understand the implementation of jQuery.parseJSON() method
Example #1
This example demonstrates the simple usage of jQuery.parseJSON() method.
Code:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
var jsonStr =
'{"firstName":"Mike","emailId":"[email protected]", "age":30, "city":"California"}';
var obj = $.parseJSON(jsonStr);
document.getElementById("name").innerHTML = obj.firstName;
document.getElementById("email").innerHTML = obj.emailId;
document.getElementById("age").innerHTML = obj.age;
document.getElementById("city").innerHTML = obj.city;
});
</script>
<style>
#divstyle {
width: 500px;
height: 280px;
padding-top: 20px;
padding-left: 5px;
font-size: 20px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<h3 style="color: black;">Example for jQuery parseJSON()</h3>
<hr />
<p id="name">First name of the person</p>
<p id="email">Email Id of the person</p>
<p id="age">Age of the person</p>
<p id="city">City of residence</p>
</div>
</body>
</html>Output:
- The below screen displays once the code above gets executed.
- In this example, once the page is loaded, the JSON string jsonStr is parsed using the $.parseJSON(jsonStr) method to a variable obj which is basically an object.
- We see on the page the properties of the object created out of JSON data getting displayed.
Example #2
This example is another demonstration of how the jQuery.parseJSON() method is used to create a parsed JS object from the JSON data.
Code:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(function(){
$('#btn').one('click', function(){
var obj = jQuery.parseJSON('{"text1":"jQuery.parseJSON() method ","text2":"parses JSON string into JS objects"}');
$('#divstyle').append(obj.text1 + obj.text2);
$("#btn").hide();
});
});
</script>
<style>
#divstyle {
width: 300px;
height: 200px;
padding-top: 20px;
padding-left: 5px;
font-size: 20px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
<body>
<div id="divstyle">
<h3 style="color: black;"> jQuery parseJSON()</h3><hr>
<center>
<br>
<button id ="btn">Click Me!</button>
</center>
</div>
</body>
</html>Output:
- The below screen displays once the code above gets executed.
- The well-formed JSON data gets parsed into a variable, obj, which is basically an object on clicking the button.
- The text shown on the page is basically formed from the properties of the object created from the parsed JSON data.
Example #3
The following example is an illustration of how the jQuery.parseJSON() method works with the JSON response from a jQuery ajax call.
Code:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: "json_demo.txt",
dataType: "text",
success: function (data) {
var json = $.parseJSON(data);
for (var i = 0; i < json.length; ++i) {
$("#divstyle").append(
'<div class="name">' +
"id: " +
json[i].id +
" , " +
"value: " +
json[i].name +
"</>"
);
}
},
});
});
</script>
<style>
#divstyle {
width: 500px;
height: 280px;
padding-top: 20px;
padding-left: 5px;
font-size: 20px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<h3 style="color: black;">jQuery parse json</h3>
<hr />
<br />
</div>
</body>
</html>Output:
- The below screen displays once the code above gets executed.
- In this example, we are trying to get JSON data using jQuery.ajax call.
- We have used a text file txt from where the JSON data is fetched and parsed to an object containing data in JSON format.
- We display the items from this parsed JSON data as shown below in the picture.
Example #4
The following example is an illustration of how key-value pairs are obtained from parsed JSON data and displayed.
Code:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
var j =
'[{"id":"1","name":"val1"},{"id":"2","name":"val2"},{"id":"3","name":"val3"},{"id":"4","name":"val4"},{"id":"5","name":"val5"}]';
var json = $.parseJSON(j);
var obj = document.getElementById("divstyle");
var json_arr = [];
$.each(json, function (key, value) {
json_arr.push("key" + "(" + key + ")" + " . " + value.name + "<br>");
});
obj.innerHTML = json_arr;
});
</script>
<style>
#divstyle {
width: 300px;
height: 180px;
padding-top: 20px;
padding-left: 5px;
font-size: 20px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<h3 style="color: black;">Example for jQuery parseJSON()</h3>
<hr />
</div>
</body>
</html>Output:
- The below screen displays once the code above gets executed.
- In this example, $.each is used to iterate through the parsed JSON data and obtain key-value pairs since jSON objects are always in key/value pairs.
- As shown below, each key/value pair is separated by a comma.
Conclusion
In this article, we discussed the parsing of JSON data using the parseJSON() method. parseJSON() method transforms a given well-structured JSON string into a JavaScript object in JSON format. If the passed JSON string is not in the correct format, the method throws an exception.
Recommended Articles
This is a guide to JQuery JSON Parse. Here we discuss How does JQuery JSON Parse Works and Examples along with codes and outputs. You may also have a look at the following articles to learn more –
