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

Il y a deux problèmes possibles :

1. AJAX est asynchrone, donc json sera indéfinie lorsque vous reviendrez de la fonction externe. Lorsque le fichier a été chargé, la fonction de rappel définira json à 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 consultez la console de votre navigateur :

   console.log(['json', json]);

2. Le chemin est peut-être mauvais. 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 utiliser 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/erreur, en-têtes HTML, etc.). Vérifiez les outils de développement de votre navigateur pour voir ce qui se passe.

Answer 2

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 ~/mon-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;

Output:

Ankit Aditi Avani

Answer 3

Pour exporter une valeur spécifique du fichier output.json (contenant le json partagé sur la question) vers une variable appelée VAR :

export VAR=$(jq -r '.children.id' output.json)