Menu
I have json file mydata.json, and in this file is some json-encoded data.
I want obtain this data in file index.html and process this data in JavaScript. But a don't know how to connect.json file in .html file?
Tell me please. Here is my json file:
{ "items": [ { "movieID": "65086", "title": "The Woman in Black", "poster": "/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg" }, { "movieID": "76726", "title": "Chronicle", "poster": "/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg" } ] } Thinking that I am getting json file from server, how to use that file in my html, so that I can display the data in tables in html page. I am using JavaScript to parse the json file. I am new to this field. Help out please.
666
You can use JavaScript like... Just give the proper path of your json file... Simply getting the data and appending it to a div... Initially printing the length in alert. that abc.
JSON can very easily be translated into JavaScript. JavaScript can be used to make HTML in your web pages.
<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!!!
73
use jQuery's $.getJSON
$.getJSON('mydata.json', function(data) { //do stuff with your data here }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
