Introduction to JSON Parser
JSON parser parses the JSON string which returns a JavaScript object. Parsing JSON is converting the JSON string to a JSON object by following some mentioned specifications. So based on the JSON object content, result can be either a string, map or an array, etc.
Syntax:
JSON.parse(string, function)
Arguments ‘string’ is a required parameter where a string is written in JSON format.
Reviver function is an optional parameter which is used to transform result. If this reviver function returns a valid value, item value gets replaced with transformed value. If in case, reviver returns undefined then the item is deleted.
For Example:
var obj = JSON.parse('{ "employeeName":"Amar", "age":36, "city":"Paris"}');
SyntaxError exception is thrown if string to parse is not a valid JSON.
JSON syntax is subset of JS syntax.
Working of JSON Parser
Javascriptobject, a data type in JS with properties and value pairs defined, JSON is data interchange formatter. Bunch of characters being formatted in various programs for easy communication which returns object corresponding to JSON text/ string.
For Example:
varjsonSample = ‘{“employeeName”: “Amar”}’;
varobj = JSON.parse(jsonStr);
console.log(obj.employeeName); // prints “Amar”
console.log(jsonSample.employeeName); // prints undefined
4.5 (5,750 ratings)
View Course
When we parse JSON, string gets converted to JSON object which can be used anywhere in the code. Here, before parsing, it is a string so data cannot be encoded. On parsing, in gets converted to JS object which makes it possible to access everywhere in the code.
Examples of JSON Parser
Given below are the examples mentioned:
Example #1
Code:
constjsonSample = '{"result":false, "count":24}';
constobj = JSON.parse(jsonSample);
console.log(obj.count);
console.log(obj.result);
console.log(JSON.parse('{}'));
console.log(JSON.parse('true'));
console.log(JSON.parse('"amar"'));
console.log(JSON.parse('[14, 45, "true"]'));
console.log(JSON.parse('null'));
//console.log(JSON.parse('[11, 22, 33, 44, ]'));
//console.log(JSON.parse('{"dob" : 34, }'));
//console.log(JSON.parse("{'age': 10}"));
Output:
Commented lines will give error.
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Parsing from JSON String</h2>
<p id="demo"></p>
<script>
var txt = '{"employeeName":"Amar", "age":36, "city":"Paris"}'
varobj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.employeeName + " of age " + obj.age + " lives in " + obj.city;
</script>
</body>
</html>
Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Conversion of JSON string to date object</h2>
<p id="demo"></p>
<script>
varsampleText = '{"employeeName":"Amar", "dob":"1986-06-24", "city":"Paris"}';
varobj = JSON.parse(sampleText);
obj.dob = new Date(obj.dob);
document.getElementById("demo").innerHTML = obj.employeeName + " was born on " + obj.dob + " in " + obj.city;
</script>
</body>
</html>
Output:
So here, Date function in Sretrieves the date of birth in IST Indian Standard Time. Date objects are not allowed in JSON, hence we write it as a string and then convert or parse it to an object.
Example #4
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Conversion of JSON string to function using parse</h2>
<p id="demo"></p>
<script>
varsampleText = '{"employeeName":"Amar", "age":"function() {return 34;}", "city":"Paris"}';
varobj = JSON.parse(sampleText);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.employeeName + " of age " + obj.age() + " lives in " + obj.city;
</script>
</body>
</html>
Output:
As functions are not allowed, hence we include function as a string and then parse it to a function. Functions lose their scope, eval() can be used to convert back to functions.
Example #5
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Conversion of string to Date object using Reviver</h2>
<p id="demo"></p>
<script>
varsampleText = '{"employeeName":"Amar", "dob":"1986-06-12", "city":"Paris"}';
varobj = JSON.parse(sampleText, function (key, value) {
if (key == "dob") {
return new Date(value);
} else {
return value;
}
});
document.getElementById("demo").innerHTML = obj.employeeName + " was born on " + obj.dob + " and lives in " + obj.city;
</script>
</body>
</html>
Output:
Example #6
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Using XMLHttpRequest to retrieve contents in a file</h2>
<p>The content is in JSON format, and can easily be converted to a JavaScript object</p>
<p id="demo"></p>
<script>
varxmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 &&this.status == 200) {
varmyObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
</script>
<p>Open <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>
</body>
</html>
Output:
On clicking josn_demo.txt, below array is displayed. On using JSON.parse on an array, parser returns JavaScript array instead of an object.
Conclusion
As we have illustrated all types of examples for JSON parsing, parsing a Date string to object, function, array, undefined values. While receiving data from a server, data is in the form of string, and sometimes this string may contain multiple fields embedded. To use each field, we will not be able to use in string format and hence input string is parsed so that it becomes easy to use embedded fields in the string. We have seen what JSON.parser means and how it works. Concept of JSON.parser is to read and interpret input data to object. Hence parsing data would be useful to find out any embedded data inside input string.
Recommended Articles
This is a guide to JSON Parser. Here we discuss the introduction to JSON Parser, working along with programming examples for better understanding. You may also have a look at the following articles to learn more –
