In this tutorial I am going to explain to parse json file using famous javascript library jquery. We already known jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Here the below code explains how to parse json using jquery.
<!doctype html> <html> <head> <title>How to Parse a JSON file using jQuery</title> <style> body{ text-align: center; font-family: arial; } .button{ margin:20px; font-size:16px; font-weight: bold; padding:5px 10px; } </style> </head> <body> <a href="data.json" target="_blank">Open JSON file</a><br /> <input type="button" value="Get and parse JSON" class="button" /> <br /> <span id="results"></span> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> //When DOM loaded we attach click event to button $(document).ready(function() { //after button is clicked we download the data $('.button').click(function(){ //start ajax request $.ajax({ url: "data.json", //force to handle it as text dataType: "text", success: function(data) { //data downloaded so we call parseJSON function //and pass downloaded data var json = $.parseJSON(data); //now json variable contains data in json format //let's display a few items $('#results').html('Plugin name: ' + json.name + '<br />Author: ' + json.author.name); } }); }); }); </script> </body> </html>