web-dev-qa-db-fra.com

comment utiliser le fichier json en code html

J'ai un fichier json mydata.json, et dans ce fichier se trouvent des données encodées en json.

Je veux obtenir ces données dans le fichier index.html et traiter ces données en JavaScript. Mais un ne sais pas comment se connecter fichier.json dans un fichier .html?

Dis-moi s'il te plaît. Voici mon fichier json:

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

En pensant que je reçois un fichier json du serveur, comment utiliser ce fichier dans mon html, afin que je puisse afficher les données dans des tableaux en page html. J'utilise JavaScript pour analyser le fichier JSON. Je suis nouveau dans ce domaine. Aidez s'il vous plaît.

javascriptjqueryhtmljsonget
39
saikiran
<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>

Mon fichier 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
       }
   ]
}

J'ai réussi à intégrer un fichier JSON à la table HTML après y avoir travaillé une journée !!!

49
saikiran

utiliser jQuery $. getJSON

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

Vous pouvez utiliser JavaScript comme ... Indiquez simplement le chemin correct de votre fichier 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>

Obtenir simplement les données et les ajouter à un div ... Imprimer initialement la longueur en alerte.

Voici mon fichier Json: abc.json

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