Charger le fichier JSON local dans la variable

Question

J'essaie de charger un fichier .json dans une variable en javascript, mais je n'arrive pas à le faire fonctionner. Il ne s'agit probablement que d'une erreur mineure, mais je n'arrive pas à la trouver.

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"
    }
  }]
}

Je mets tout ce qui est dans le {} dans un content.json et j'ai essayé de le charger dans une variable JavaScript locale comme expliqué ici : charger json dans une 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 de Chrome et il me dit toujours que la valeur de la variable json es null . Le site content.json se trouve dans le même répertoire que le fichier .js qui l'appelle.

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

Answer 1

Ma solution, comme répondu aquí est à utiliser :

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

Le fichier n'est chargé qu'une seule fois, les demandes ultérieures utilisent le cache.

modifier Pour éviter la mise en cache, voici la fonction d'aide de ce blogpost indiqué 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))
  })
}

Answer 2

Pour ES6/ES2015, vous pouvez import directement comme :

// 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 -- resolveJsonModule compilerOptions dans tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
     ...
    "resolveJsonModule": true,
     ...
  },
  ...
}

Answer 3

Si vous avez collé votre objet dans content.json directement, il s'agit d'un JSON non valide. Clés JSON et doivent être entourées de guillemets doubles ( " no ' ), sauf si la valeur est numérique ou booléenne, null ou composite (tableau ou objet). JSON ne peut pas contenir de fonctions ou undefined valeurs. Voici votre objet sous forme de JSON valide.

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

Vous aviez aussi un supplément } .

Answer 4

Une solution sans require ni fs :

var json = []
fetch('./content.json').then(response => json = response.json())

Answer 5

Le système intégré module fs de node.js le fera de manière asynchrone ou synchrone, selon 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());