web-dev-qa-db-fra.com

Comment puis-je ouvrir un fichier JSON en JavaScript sans jQuery?

J'écris du code en JavaScript. Dans ce code, je veux lire un fichier json. Ce fichier sera chargé à partir d'une URL.

Comment puis-je obtenir le contenu de ce fichier JSON dans un objet en JavaScript?

Il s'agit par exemple de mon fichier JSON situé à ../json/main.json:

{"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]}

et je veux l'utiliser dans mon table.js fichier comme celui-ci:

for (var i in mainStore)
{       
    document.write('<tr class="columnHeaders">');
    document.write('<td >'+ mainStore[i]['vehicle'] + '</td>');
    document.write('<td >'+ mainStore[i]['description'] + '</td>');
    document.write('</tr>');
}
javascriptjsonxmlhttprequest
19
Rick Weller

Voici un exemple qui ne nécessite pas jQuery:

function loadJSON(path, success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if (success)
                    success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(xhr);
            }
        }
    };
    xhr.open("GET", path, true);
    xhr.send();
}

Appelez-le comme:

loadJSON('my-file.json',
         function(data) { console.log(data); },
         function(xhr) { console.error(xhr); }
);
43
Drew Noakes

XHR peut être utilisé pour ouvrir des fichiers, mais vous vous rendez la tâche difficile, car jQuery vous facilite la tâche. $.getJSON() rend cela si facile à faire. Je préfère appeler une seule ligne que d'essayer de faire fonctionner un bloc de code entier, mais c'est à vous ...

Pourquoi je ne veux pas utiliser jQuery parce que la personne pour laquelle je travaille ne le veut pas parce qu'il a peur de la vitesse du script.

S'il ne peut pas profiler correctement VS jQuery natif, il ne devrait même pas programmer de code natif.

Avoir peur signifie qu'il ne sait pas ce qu'il fait. Si vous envisagez d'aller vers la performance, vous devez réellement savoir comment rendre plus rapides certains morceaux de code. Si vous pensez seulement que jQuery est lent, alors vous marchez sur les mauvaises routes ...

1
Tamara Wijsman

Je comprends qu'en "lisant un fichier json", vous entendez faire la demande à l'url qui renvoie le contenu json. Si oui, pouvez-vous expliquer pourquoi vous ne souhaitez pas utiliser jQuery à cette fin? Il a la fonction $ .ajax qui convient parfaitement à cela et couvre les différences des navigateurs.

Si vous souhaitez lire le fichier, vous devez le faire côté serveur, par ex. php et le fournir en quelque sorte au dom (il existe différentes méthodes) afin que js puisse l'utiliser. La lecture du fichier depuis le disque avec js n'est pas possible.

0
Michal B.

JSON a rien à voir avec jQuery.

Il y a rien mal avec le code que vous avez maintenant.

Pour stocker la variable mainStore, c'est une variable dans ce json.

Vous devez stocker ce json dans une variable:

var myJSON = {"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]};

var mainStore = myJSON.mainStore;

//.. rest of your code.
0
Neal