web-dev-qa-db-fra.com

Charger le fichier JSON local dans une variable

J'essaie de charger un fichier .json dans une variable en javascript, mais je ne parviens pas à le faire fonctionner. C'est probablement juste une erreur mineure mais je ne la trouve pas.

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

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 se trouve dans {} dans un fichier content.json et j'ai essayé de le charger dans une variable javascript locale comme expliqué ici: charger json dans 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 exécuté avec le débogueur chrome et il me dit toujours que la valeur de la variable json est null. Content.json réside dans le même répertoire que le fichier .js qui l'appelle.

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

javascriptjqueryjson
79
PogoMips

Si vous avez directement collé votre objet dans content.json, json n'est pas valide. Les clés json ET les valeurs doivent être entourées de guillemets (pas simples!) sauf si la valeur est numérique ou booléenne. Ci-dessous serait votre objet en tant que JSON valide.

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

(vous avez également eu un } supplémentaire)

32
Kevin B

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

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

Le fichier est chargé une seule fois, d'autres requêtes utilisent le cache.

edit Pour éviter la mise en cache, voici la fonction d'assistance de this blogpost donnée dans les commentaires, en utilisant le module fs :

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

Pour ES6/ES2015, vous pouvez importer directement comme suit:

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


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

Si vous utilisez TypeScript, vous pouvez déclarer le module json comme suit:

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

Depuis TypeScript 2.9+, vous pouvez ajouter -- resolutJsonModule compilerOptions dans tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
     ...
    "resolveJsonModule": true,
     ...
  },
  ...
}
29
Little Roys

Il y a deux problèmes possibles:

  1. AJAX est asynchrone, donc json sera indéfini lorsque vous revenez de la fonction externe. Une fois le fichier chargé, la fonction de rappel affectera une valeur à json, mais à ce moment-là, plus personne ne s'en soucie.

    Je vois que vous avez essayé de résoudre ce problème 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]);

  2. Le chemin peut être faux. 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 URL auxquelles ils ont essayé d'accéder et comment cela s'est passé (codes de réussite/d'erreur, en-têtes HTML, etc.). Vérifiez les outils de développement de votre navigateur pour voir ce qui se passe.

4
Aaron Digulla

Le module intégré node.js module fs le fera de manière asynchrone ou synchrone en fonction de vos besoins.

Vous pouvez le charger en utilisant var fs = require('fs');

Asynchrone

fs.readFile('./content.json', (err, data) => {
    if (err)
      console.log(err);
    else {
      var json = JSON.parse(data);
    //your code using json object
    }
})

Synchrone

var json = JSON.parse(fs.readFileSync('./content.json').toString());
2
Arnaud M.