web-dev-qa-db-fra.com

Comment obtenir du javascript pour lire à partir d'un fichier .json?

Mon script ressemble actuellement à ceci:

<script type="text/javascript">
  function updateMe(){
    var x = 0;
    var jsonstr = '{"date":"July 4th", "event":"Independence Day"}';
    var activity=JSON.parse(jsonstr);
    while(x<10){
    date = document.getElementById("date"+x).innerHTML = activity.date;
    event = document.getElementById("event"+x).innerHTML = activity.event;
    x++;
    }
  }
</script>

Où date "x" et événement "x" sont une série de balises HTML. Cette fonction s'exécute lors du chargement de la page (onload). Mon objectif est de faire exactement la même chose, uniquement à partir d'un fichier .json local, par opposition au code dur que j'ai ci-dessus. J'ai déjà vérifié http://api.jquery.com/jQuery.getJSON/ .

Le fichier local .json ressemble à ceci:

{"date":"July 4th", "event":"Independence Day"}

Aucune suggestion?

javascriptjsongetjson
29
MTP

En supposant que vous vouliez dire "fichier sur un système de fichiers local" lorsque vous dites fichier .json.

Vous devez enregistrer les données JSON au format jsonp et utiliser un file:// url pour y accéder.

Votre code HTML ressemblera à ceci:

<script src="file://c:\\data\\activity.jsonp"></script>
<script type="text/javascript">
  function updateMe(){
    var x = 0;
    var activity=jsonstr;
    foreach (i in activity) {
        date = document.getElementById(i.date).innerHTML = activity.date;
        event = document.getElementById(i.event).innerHTML = activity.event;
    }
  }
</script>

Et le fichier c:\data\activity.jsonp contient la ligne suivante:

jsonstr = [ {"date":"July 4th", "event":"Independence Day"} ];
33
ironchefpython

Vous pouvez le faire comme ... Donnez juste 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"}]';
3
Javed

AVIS: À PARTIR DU 12 JUILLET 2018, LES AUTRES RÉPONSES SONT TOUTES À JOUR. JSONP IS A MAINTENANT CONSIDÉRÉ UNE IDÉE TERRIBLE

Si vous avez votre code JSON sous forme de chaîne, JSON.parse() fonctionnera correctement. Puisque vous chargez le json depuis un fichier, vous devrez lui faire un XMLHttpRequest. Par exemple (exemple w3schools.com):

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
<!DOCTYPE html>
<html>
<body>

<h2>Use the XMLHttpRequest to get the content of a file.</h2>
<p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p>

<p id="demo"></p>


<p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

Cela ne fonctionnera pas ici car ce fichier ne se trouve pas ici. Allez à cet exemple w3schools cependant: https://www.w3schools.com/js/tryit.asp?filename=tryjson_ajax

Voici la documentation de JSON.parse (): https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

Voici un résumé:

La méthode JSON.parse () analyse une chaîne JSON et construit la valeur ou l'objet JavaScript décrit par la chaîne. Une fonction reviver facultative peut être fournie pour effectuer une transformation sur l'objet résultant avant son renvoi.

Voici l'exemple utilisé:

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

Voici un résumé sur XMLHttpRequests de https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest : 

Utilisez des objets XMLHttpRequest (XHR) pour interagir avec les serveurs. Vous pouvez récupérer des données à partir d'une URL sans avoir à actualiser toute la page. Cela permet à une page Web de ne mettre à jour qu'une partie de la page sans perturber le travail de l'utilisateur. XMLHttpRequest est fortement utilisé dans la programmation Ajax.

Si vous ne voulez pas utiliser XMLHttpRequests, alors une méthode JQUERY (dont je ne sais pas pourquoi elle ne fonctionne pas pour vous) est http://api.jquery.com/jQuery.getJSON/

Comme cela ne fonctionne pas, j'essayerais d'utiliser XMLHttpRequests

Vous pouvez également essayer les requêtes AJAX:

$.ajax({
    'async': false,
    'global': false,
    'url': "/jsonfile.json",
    'dataType': "json",
    'success': function (data) {
        // do stuff with data
    }
});

Documentation: http://api.jquery.com/jquery.ajax/

0
Sheshank S.

En fait, vous recherchez l'appel AJAX, dans lequel vous allez remplacer la valeur du paramètre d'URL par le lien du fichier JSON pour obtenir les valeurs JSON.

$.ajax({
    url: "File.json", //the path of the file is replaced by File.json
    dataType: "json",
    success: function (response) {
        console.log(response); //it will return the json array
    }
});
0
Junaid Shahid