how to use json file in html code
<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script><script> $(function() { var people = []; $.getJSON('people.json', function(data) { $.each(data.person, function(i, f) { var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>" $(tblRow).appendTo("#userdata tbody"); }); });});</script></head><body><div class="wrapper"><div class="profile"> <table id= "userdata" border="2"> <thead> <th>First Name</th> <th>Last Name</th> <th>Email Address</th> <th>City</th> </thead> <tbody> </tbody> </table></div></div></body></html>My JSON file:
{ "person": [ { "firstName": "Clark", "lastName": "Kent", "job": "Reporter", "roll": 20 }, { "firstName": "Bruce", "lastName": "Wayne", "job": "Playboy", "roll": 30 }, { "firstName": "Peter", "lastName": "Parker", "job": "Photographer", "roll": 40 } ]}I succeeded in integrating a JSON file to HTML table after working a day on it!!!
You can use JavaScript like...Just give the proper path of your json file...
<!doctype html><html> <head> <script type="text/javascript" src="abc.json"></script> <script type="text/javascript" > function load() { var mydata = JSON.parse(data); alert(mydata.length); var div = document.getElementById('data'); for(var i = 0;i < mydata.length; i++) { div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>"; } } </script> </head> <body onload="load()"> <div id="data"> </div> </body></html>Simply getting the data and appending it to a div... Initially printing the length in alert.
Here is my Json file: abc.json
data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';