ローカルJSONファイルを変数にロード

JavaScriptの変数に.jsonファイルをロードしようとしていますが、それを機能させることができません。おそらく小さなエラーですが、見つかりません。

次のような静的データを使用すると、すべてがうまく機能します。

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

私は中だすべてを置く{}にはcontent.json：ここで説明するように、そのローカルJavaScript変数にファイルや負荷にしようとしたが、負荷JSONを変数に。

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

私はクロームデバッガでそれを実行し、それは常に、変数の値があることを私に伝えjsonていますnull。このcontent.jsonファイルは、それを呼び出す.jsファイルと同じディレクトリにあります。

私は何を取りこぼしたか？

オブジェクトをcontent.json直接貼り付けた場合、それは無効なJSONです。JSONのキーと値は、値が数値、ブール値、または複合（配列またはオブジェクト）でない限り、二重引用符（"ではなく'）で囲む必要がありますnull。JSONに関数やundefined値を含めることはできません。以下は、有効なJSONとしてのオブジェクトです。

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

追加もありました}。

ここで答えたように、私の解決策は次のものを使用することです：

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

ファイルは1回だけロードされ、それ以降のリクエストはキャッシュを使用します。

編集キャッシュを回避するために、モジュールを使用して、コメントで指定されたこのブログ投稿のヘルパー関数を次に示しfsます。

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

ES6 / ES2015の場合、次のように直接インポートできます。

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


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

Typescriptを使用する場合は、jsonモジュールを次のように宣言できます。

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

Typescript 2.9以降では、次を追加できます-resolveJsonModule compilerOptions intsconfig.json

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

2つの考えられる問題があります。

1. AJAXは非同期であるためjson、外部関数から戻ったときに未定義になります。ファイルがロードされると、コールバック関数はjsonある値に設定されますが、その時点では誰も気にしません。

   これをで修正しようとしたと思います'async': false。これが機能するかどうかを確認するには、次の行をコードに追加し、ブラウザーのコンソールを確認します。

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

2. パスが間違っている可能性があります。HTMLドキュメントにスクリプトを読み込むために使用したのと同じパスを使用します。したがって、スクリプトがの場合はjs/script.js、js/content.json

   一部のブラウザでは、アクセスしようとしたURLとその方法（成功/エラーコード、HTMLヘッダーなど）を表示できます。ブラウザーの開発ツールをチェックして、何が起こるかを確認してください。

組み込みのnode.jsモジュールfsは、必要に応じて非同期または同期で実行します。

あなたはそれを使ってそれをロードすることができます var fs = require('fs');

非同期

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

同期

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

ファイル〜/ my-app / src / db / abc.jsonのような特定のjson形式の場合：

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

〜/ my-app / src / app.jsのような.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;

出力：

Ankit Aditi Avani