Updated April 12, 2023
Introduction to jQuery JSON encode
jQuery JSON Encode is used to parse JSON string and return JavaScript value or an object specified by input string. Parsing or also known as Encoding a string using jQuery requires a jQuery library written on top of JavaScript. jQuery provides a method known as ‘parseJSON’, a general Utility method, shorthand version $.parseJSON() is the method used which returns a JavaScript object. As JSON is limited to text and numerical, it does not support binary data. JSON is JavaScript Object Notation which is a set of key-value pairs starting with ‘{‘ and ending with ‘}’.
Syntax:
jQuery.parseJSON( json )- Arguments: parseJSON (JSON) accepts a single parameter JSON, well-formed JSON string to be parsed.
- Return value: This method will return a JavaScript string or object, number, an Array, or a Boolean value.
Shorthand version of the above syntax: $.parseJSON ( JSON )
The shorthand version works before jQuery 3. As jQuery 3 has deprecated the shorthand method, for parsing JSON strings to JavaScript Object, JSON.parse() method is being used in jQuery 3 now.
- Sending a malformed JSON input string to jQuery.parseJSON() will result in an exception thrown by browser.
- Sending null value or an undefined value or an empty string to jQuery.parseJSON(), method will return a null value.
- If the browser provides a native implementation of JSON.parse(), here jQuery uses to encode the string.
- Some of the invalid strings,
- “{hello: 45}”: string ‘hello’ should have double-quotes.
- “{‘hello’:89}”: string ‘hello’ should be enclosed in double-quotes but not single quotes.
- “’hello’”: string ‘hello’ should not use single quotes.
- “.94”: A numerical value must start with a digit but not with any special characters. “94” will be a valid digit.
- “NaN”: This cannot be represented in JSON string, also a representation of Infinity is also not permitted as valid.
- “undefined”: JSON cannot accept undefined as a string, instead accepts null as a string.
As the JSON standard does not permit ‘control characters’ or ‘special characters’ such as newline or tab, as the JavaScript’s parser will convert string’s newline or tab’s into newline or tab literally.
Before jQuery 1.9 version, $.parseJSON returned NULL value instead of throwing an error when an empty string was passed even though these values are not valid JSON strings.
Examples
Let us get into few examples which will give us an idea on How Json Encidng works with jQuery
Example:
var sample_obj = jQuery.parseJSON( '{ "empName": "Mike", "age": "24" }' );
alert(sample_obj.name === "Mike" );
alert(sample_obj.age === "25");Example #1: jQuery JSON Encode example
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery parseJSON()</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body style="text-align:center;">
<script>
var sample_obj = jQuery.parseJSON( '{ "empName":"Mike", "age":25, "empdesg":"SSE"}' );
alert( sample_obj.empName + " is working as a " + sample_obj.empdesg );
</script>
</body>
</html>Output:
In the above example, <script src=”https://code.jquery.com/jquery-3.4.1.js”></script> this is the major line of code, it is the jQuery library required to use jQuery.parseJSON() method.
Example #2: jQuery JSON encode(Shorthand version)
Code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var sample_json = '{"stuName":"Radha","schName":"SHMS", "stnd":"V"}';
var stuDetails = $.parseJSON(sample_json);
document.getElementById("stuName").innerHTML = stuDetails.stuName;
document.getElementById("schName").innerHTML = stuDetails.schName;
document.getElementById("stnd").innerHTML = stuDetails.stnd;
alert(stuDetails.stuName + " is of standard " + stuDetails.stnd + " studying in " + stuDetails.schName);
});
</script>
</head>
<body>
<h2>jQuery parseJSON() example</h2>
<p id="stuName"></p>
<p id="schName"></p>
<p id="stnd"></p>
</body>
</html>Output:
In the above example, we are using the shorthand version of jQuery, hence we are using
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> as the jQuery library.Example #3: Displaying Encoded JSON object using jQuery.parseJSON() method.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery parseJSON() method</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
#text {
color: green;
}
</style>
</head>
<body style="text-align:right;">
<h2 style="color: Red">
This example illustrates jQuery JSON Encoding
</h2>
<h3>jQuery parseJSON method</h3>
<b id="text"></b>
<script>
var sample_txt = '{"stuName":"Radha","schName":"SHMS", "stnd":"V"}';
var sample_obj = jQuery.parseJSON(sample_txt);
document.getElementById("text").innerHTML =
"Student Name : "+sample_obj.stuName + "<br> Student School : " + sample_obj.schName + "<br> Student Standard : " + sample_obj.stnd;
</script>
</body>
</html>Output:
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery JSON Encoding</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body style="text-align:left;">
<h3 style="color: red">
We shall alert if encoded JSON matches with the value we are searching for
</h3>
<button onclick="equal()">Click</button>
<script>
function equal(){
var sample_txt = '{ "empName":"Mike", "age":25, "empdesg":"SSE"}'
var sample_obj = jQuery.parseJSON(sample_txt);
alert( sample_obj.empName === "Mike" );
}
</script>
</body>
</html>Output:
On clicking on the button, an alert pops up saying true or false according to the value user is searching for.
Example #5
Code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
body {
font-family: Times New Roman;
font-size: 14pt;
padding : 14px;
}
</style>
<script>
$(document).ready(function () {
var jsonNames = '[{"name":"Abc"},{"name":"Xyz"}]';
var sampleName = 'Both the names are: ';
var sampleobj = $.parseJSON(jsonNames);
$.each(sampleobj, function () {
sampleName += this['name'] + "<br/>";
});
$('span').html(sampleName);
});
</script>
</head>
<body>
<h2>jQuery parseJSON() example</h2>
<span></span>
</body>
</html>Output:
Internally, jQuery.parseJSON() makes use of JSON.parse() method of JavaScript as jQuery’s library is on top of the JavaScript.
JSON.parse() method is not supported by old browsers like IE 7, Safari 3, etc., but as now most of the browsers have evolved. Hence, the implementations of jQuery.parseJSON() is changed to JSON.parse after jQuery 2.0 versions release.
With this, we come to a conclusion for the topic ‘jQuery JSON Encode’. We have seen what jQuery JSON Encode is and how it works depending on the versions, shorthand version, and JSON.parse() method which is being used now. Also seen the syntax of how to write the JSON input string and its return values. Few examples have been listed above which will cover all the concepts related to JSON Encoding with jQuery. Please note, internally jQuery uses JSON.parse() method. For jQuery to work, we require an external library to implement jQuery.JSONparse() method.
Recommended Articles
This is a guide to jQuery JSON encode. Here we also discuss the introduction, syntax, parameters and different examples and its code implementation. You may also have a look at the following articles to learn more –
