cómo usar el file json en código html

Tengo un file json mydata.json , y en este file hay algunos datos codificados json.

Quiero get estos datos en el file index.html y procesar estos datos en JavaScript. ¿Pero no sé cómo conectar el file .json en el file .html?

Dime por favor. Aquí está mi file json :

 { "items": [ { "movieID": "65086", "title": "The Woman in Black", "poster": "/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg" }, { "movieID": "76726", "title": "Chronicle", "poster": "/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg" } ] } 

Pensando que estoy obteniendo el file json del server, cómo usar ese file en mi html, para poder mostrar los datos en tablas en la página html. Estoy usando JavaScript para analizar el file json. Soy nuevo en este campo. Ayuda por favor

 <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> 

mi file json

 { "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 } ] } 

¡Conseguí integrar un file json en la tabla html después de trabajar un día en él!

usa $ .getJSON de jQuery

 $.getJSON('mydata.json', function(data) { //do stuff with your data here }); 

Puedes usar JavaScript como … Simplemente da la ruta correcta de tu file json …

 <!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> 

Simplemente obteniendo los datos y anexándolos a un div … Inicialmente imprimiendo la longitud en alerta.

Aquí está mi file Json: abc.json

 data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';