Charger le fichier JSON local dans la variable

Question

Charger le fichier JSON local dans la variable

j'essaie de charger un .fichier json dans une variable en javascript, mais je ne peux pas le faire fonctionner. C'est sûrement une erreur mineure, mais je ne la trouve pas.

Tout fonctionne très bien lorsque j'utilise des données statiques comme celles-ci:

var json = {
            id: "whatever", 
            name: "start",
            children: [{
                         "id":"0.9685","name":" contents:queue"},{
                         "id":"0.79281","name":" contents:mqq_error"}}]
        }

donc j'ai mis tout ce qui est dedans dans un contenu.JSON et essayé de charger cela dans une variable javascript locale comme expliqué ici: charger json dans la variable

var json = (function() {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "/content.json",
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();

Je l'ai lancé avec le débogueur chrome et il me dit toujours que la valeur de la variable json est nulle. Contenu.json se trouve dans le même répertoire que le .fichier js qui est de l'appeler.

Qu'est-ce que j'ai manqué?

64

javascript jquery json

demandé sur Community 2013-01-23 20:34:04

4 réponses

score 26 · Answer 1

Si vous avez collé votre objet dans le contenu.JSON directement, il est invalide json. les clés et les valeurs json doivent être enveloppées dans des guillemets doubles (pas simples!), sauf si la valeur est numérique. Ci-dessous serait votre objet json valide.

{
  "id": "whatever", 
  "name": "start",
  "children": [{
    "id":"0.9685","name":" contents:queue"},{
    "id":"0.79281","name":" contents:mqq_error"}]
}

(vous aviez aussi un extra } )

score 75 · Answer 2

ma solution, comme répondu ici , est d'utiliser:

    var json = require('./data.json'); //with path

le fichier n'est chargé qu'une seule fois, les requêtes ultérieures utilisent le cache.

edit pour éviter la mise en cache, voici la fonction d'aide de ce blogpost donné dans les commentaires, en utilisant le fs module:

var readJson = (path, cb) => {
  fs.readFile(require.resolve(path), (err, data) => {
    if (err)
      cb(err)
    else
      cb(null, JSON.parse(data))
  })
}

score 10 · Answer 3

pour ES6 / ES2015 vous pouvez importer directement comme:

// example.json
{
    "name": "testing"
}


// ES6/ES2015
// app.js
import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'

si vous utilisez typescript, vous pouvez déclarer le module JSON comme:

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}

score 3 · Answer 4

il y a deux problèmes possibles:

AJAX est asynchrone, donc json ne sera pas défini lorsque vous revenez de la fonction externe. Lorsque le fichier a été chargé, la fonction de rappel va mettre json à une certaine valeur, mais à ce moment-là, plus personne ne s'en soucie.

je vois que vous avez essayé d'arranger ça avec 'async': false . Pour vérifier si cela fonctionne, Ajoutez cette ligne au code et vérifiez la console de votre navigateur.:
```
console.log(['json', json]);
```
le chemin pourrait être erroné. Utilisez le même chemin que vous avez utilisé pour charger votre script dans le document HTML. Donc si votre script est js/script.js , utilisez js/content.json

certains navigateurs peuvent vous montrer les URLs auxquelles ils ont essayé d'accéder et comment cela s'est passé (codes succès/erreur, en-têtes HTML, etc). Consultez les outils de développement de votre navigateur pour voir ce qui se passe.

Las etiquetas más populares

Charger le fichier JSON local dans la variable

4 réponses