Parse external JSON file using jQuery/JavaScript

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

JSON(JavaScript Object Notation) is a data-interchange format used to store and transport data. Database records, software meta-information are usually stored in XML and JSON files.

JSON files are lightweight, concise and easy to parse than XML files, and that’s why JSON is increasingly gaining more acceptance than XML.

Being a subset of Javascript, JSON can be easily parsed using Javascript and jQuery without any fuss.

In the post, we’ll parse an extenal JSON file called ‘myjson.json’ using both jQuery as well as JavaScript. Here is how the JSON file looks like,

myjson.json

{"qa":[
 {"id":"33",
 "level":"6",
 "question":"How to parse external JSON file using jQuery?"},

{"id":"838",
 "level":"3",
 "question":"Is parsing in jQuery simpler?"},

 {"id":"1508",
 "level":"2",
 "question":"Are you really parsing JSON file?"},

 {"id":"2364",
 "level":"1",
 "question":"This is the last question?"},

....

Parse extrnal JSON file using jQuery: The Simplest Way

Parsing JSON in jQuery is simpler as compared to JavaScript. Using jQuery, we can fetch the JSON file in the same ‘JSON’ format and easily pick up the desired values.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script language='Javascript'>

$.get("myjson.json","",function(data){
alert("Question: "+data.qa[0].question+"\n UID: "+data.qa[0].id+"\n Difficulty Level: "+data.qa[0].level);
},"json");

</script>

Parse external JSON file using Javascript or jQuery

Parsing JSON file using JavaScript: The Lightweight Alternative

Doing the same using Javascript is gruesome as the returned Ajax response is in text format, unlike jQuery that fetches response in JSON. So we have to convert the returned text data to JSON using JSON.parse method which is natively supported by all modern browsers.


<script language='Javascript'>

if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}

else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
parsejdata=JSON.parse(xmlhttp.responseText);
alert("Question: "+parsejdata.qa[0].question+"\nUID: "+parsejdata.qa[0].id+"\nDifficulty Level: "+parsejdata.qa[0].level);
}
}

xmlhttp.open("GET","myjson.json",true);
xmlhttp.send(null);

</script>

Alternatively, we can also use eval() to do the same but it has security issues. The eval() JS function is open to all JavaScript statement, variable, expression or sequence of statements. So, it can also execute the malicious code, if present inside the JSON file. On the contrary, JSON.parse only parses the JSON text.

blog comments powered by Disqus