Comment puis-je lire javascript à partir d'un fichier.json?

Question

Comment puis-je lire javascript à 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 lorsque la page se charge (onload). Mon but est de faire exactement la même chose, seulement d'un local .fichier json par opposition au code dur que j'ai ci-dessus. J'ai déjà vérifié http://api.jquery.com/jQuery.getJSON/.

Locales .fichier json ressemble à ceci:

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

Des suggestions?

28

getjson javascript json

demandé sur MTP 2011-07-15 21:36:07

4 réponses

score 32 · Answer 1

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

Vous devrez enregistrer les données JSON formatées en tant que 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"} ];

score 3 · Answer 2

Vous pouvez le faire comme... Donnez simplement le chemin approprié 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... Impression initiale de la longueur dans alert.

Voici mon fichier Json: abc.json

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

score 0 · Answer 3

AVIS: À PARTIR DU 12 JUILLET 2018, LES AUTRES RÉPONSES SONT TOUTES OBSOLÈTES. JSONP EST MAINTENANT CONSIDÉRÉ COMME UNE IDÉE TERRIBLE

Si vous avez votre JSON en tant que chaîne, JSON.parse() fonctionnera bien. Puisque vous chargez le json à partir d'un fichier, vous devrez y faire un XMLHttpRequest. Par exemple (C'est w3schools.com exemple):

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 n'est pas situé ici. Allez à cet exemple W3Schools cependant: https://www.w3schools.com/js/tryit.asp?filename=tryjson_ajax

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

Voici un résumé:

Le JSON.la méthode parse() analyse une chaîne JSON, construisant la valeur JavaScript ou l'objet décrit par la chaîne. Une fonction reviver optionnelle peut être fournie pour effectuer une transformation sur l'objet résultant avant lui est retourné.

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 les objets XMLHttpRequest (XHR) pour interagir avec les serveurs. Vous pouvez récupérer des données à partir d'une URL sans avoir à effectuer une actualisation complète de la page. Cela permet à une page Web de mettre à jour une partie d'une page sans perturber ce que fait l'utilisateur. XMLHttpRequest est fortement utilisé dans Programmation Ajax.

Si vous ne voulez pas utiliser XMLHttpRequests, alors une manière JQUERY (dont je ne suis pas sûr pourquoi cela ne fonctionne pas pour vous) est http://api.jquery.com/jQuery.getJSON/

Comme cela ne fonctionne pas, j'essaierais 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/

score 0 · Answer 4

En fait, vous recherchez L'appel AJAX, dans lequel vous remplacerez la valeur du paramètre 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
    }
});

Las etiquetas más populares

Comment puis-je lire javascript à partir d'un fichier.json?

4 réponses