Charger le fichier JSON local dans la variable

J'essaye de charger un fichier .json dans une variable en javascript, mais je n'arrive 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 celle-ci:

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

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

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

Si vous avez collé votre objet content.jsondirectement dans , il s'agit d'un JSON non valide. Les clés et les valeurs JSON doivent être placées entre guillemets ( "pas ') sauf si la valeur est numérique, booléenne nullou composite (tableau ou objet). JSON ne peut pas contenir de fonctions ou de undefinedvaleurs. Voici 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 aviez également un extra }.

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

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

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

edit Pour éviter la mise en cache, voici la fonction d'assistance de cet article de blog donnée dans les commentaires, en utilisant le fsmodule:

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

Pour ES6 / ES2015, vous pouvez importer 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 un module json comme:

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

Depuis Typescript 2.9+, vous pouvez ajouter - resolverJsonModule compilerOptions danstsconfig.json

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

Il y a deux problèmes possibles:

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

   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 pourrait être erroné. Utilisez le même chemin que celui utilisé pour charger votre script dans le document HTML. Donc, si votre script est js/script.js, utilisezjs/content.json

   Certains navigateurs peuvent vous montrer à quelles URL ils ont tenté d'accéder et comment cela s'est passé (codes de réussite / d'erreur, en-têtes HTML, etc.). Consultez les outils de développement de votre navigateur pour voir ce qui se passe.

Le module node.js intégré 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());

Pour le format json donné comme dans le fichier ~ / my-app / src / db / abc.json:

  [
      {
        "name":"Ankit",
        "id":1
      },
      {
        "name":"Aditi",
        "id":2
      },
      {
        "name":"Avani",
        "id":3
      }
  ]

afin d'importer dans un fichier .js comme ~ / my-app / src / app.js:

 const json = require("./db/abc.json");

 class Arena extends React.Component{
   render(){
     return(
       json.map((user)=>
        {
          return(
            <div>{user.name}</div>
          )
        }
       )
      }
    );
   }
 }

 export default Arena;

Production:

Ankit Aditi Avani