Laden Sie die lokale JSON-Datei in eine Variable

Ich versuche, eine .json-Datei in eine Variable in Javascript zu laden, aber ich kann sie nicht zum Laufen bringen. Es ist wahrscheinlich nur ein kleiner Fehler, aber ich kann ihn nicht finden.

Alles funktioniert einwandfrei, wenn ich statische Daten wie folgt verwende:

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

Ich habe alles, was in der Datei enthalten ist, {}in eine content.jsonDatei eingefügt und versucht, dies in eine lokale JavaScript-Variable zu laden, wie hier erläutert: Laden Sie json in eine Variable .

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

Ich habe es mit dem Chrome-Debugger ausgeführt und es sagt mir immer, dass der Wert der Variablen jsonist null. Die content.jsonDatei befindet sich im selben Verzeichnis wie die JS-Datei, die sie aufruft.

Was habe ich verpasst?

Wenn Sie Ihr Objekt content.jsondirekt eingefügt haben , ist JSON ungültig. JSON-Schlüssel und -Werte müssen in doppelte Anführungszeichen gesetzt werden ( "nicht '), es sei denn, der Wert ist numerisch, boolesch nulloder zusammengesetzt (Array oder Objekt). JSON darf keine Funktionen oder undefinedWerte enthalten. Unten ist Ihr Objekt als gültiger JSON.

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

Sie hatten auch ein Extra }.

Meine hier beantwortete Lösung lautet:

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

Die Datei wird nur einmal geladen, weitere Anfragen verwenden den Cache.

Bearbeiten Um Caching zu vermeiden, finden Sie hier die Hilfsfunktion dieses Blogposts in den Kommentaren mithilfe des fsModuls:

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

Für ES6 / ES2015 können Sie direkt importieren wie:

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


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

Wenn Sie Typescript verwenden, können Sie das JSON-Modul wie folgt deklarieren:

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

Seit Typescript 2.9+ können Sie hinzufügen - auflösenJsonModule compilerOptions intsconfig.json

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

Es gibt zwei mögliche Probleme:

1. AJAX ist asynchron und wird daher jsonnicht definiert, wenn Sie von der äußeren Funktion zurückkehren. Wenn die Datei geladen wurde, wird die Rückruffunktion jsonauf einen bestimmten Wert gesetzt, aber zu diesem Zeitpunkt kümmert sich niemand mehr darum.

   Ich sehe, dass Sie versucht haben, dies zu beheben 'async': false. Um zu überprüfen, ob dies funktioniert, fügen Sie diese Zeile zum Code hinzu und überprüfen Sie die Konsole Ihres Browsers:

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

2. Der Pfad könnte falsch sein. Verwenden Sie denselben Pfad, den Sie zum Laden Ihres Skripts in das HTML-Dokument verwendet haben. Also, wenn Ihr Skript ist js/script.js, verwenden Siejs/content.json

   Einige Browser können Ihnen zeigen, auf welche URLs sie zugreifen wollten und wie dies ging (Erfolgs- / Fehlercodes, HTML-Header usw.). Überprüfen Sie die Entwicklungstools Ihres Browsers, um festzustellen, was passiert.

Das eingebaute node.js-Modul fs dies je nach Bedarf entweder asynchron oder synchron.

Sie können es mit laden var fs = require('fs');

Asynchron

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

Synchron

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

Für das angegebene JSON-Format wie in der Datei ~ / my-app / src / db / abc.json:

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

Um in eine .js-Datei wie ~ / my-app / src / app.js zu importieren:

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

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

 export default Arena;

Ausgabe:

Ankit Aditi Avani