web-dev-qa-db-ja.com

ローカルJSONの取得

ディレクトリにあるローカルJSONファイルを取得するにはどうすればよいですか？

jSONファイルは次のようになります。

[
  {
    "name": "Sara",
     "id": 3232
   },
  {
    "name": "Jim",
     "id": 2342
   },
  {
     "name": "Pete",
      "id": 532532
   }
]

私が使用しようとしている同じファイル内にjson情報がある場合、それは美しく機能しますが、それを持ち込みたい場合は、私の人生のためにそれを機能させることはできず、それを読み続けます未定義。

ここに私が持っているものがあります

getData() {


    var json_data = require('../services/contributors.JSON');


    for (var i in json_data){
    console.log('Name: ' + json_data[i]["name"])

    }


}

私が間違っていることを見ることができますか？私はこれを反応させようとしているので、反応は異なるかもしれませんか？知りません。任意の助けをいただければ幸いです。ありがとうございました！

javascriptjsonreactjs
5
PepperAddict

ファイルシステムを使用してみてください。 JSONファイルからの読み取りがそのように機能するとは思わないでください。

const fs = require('fs');
const json_data = require('../services/contributors.JSON');

fs.readFile(json_data, 'utf8', function (err, data) {
  try {
    data = JSON.parse(data)
    for (let i in data){
    console.log('Name:',data[i].name)
    }
  } catch (e) {
    // Catch error in case file doesn't exist or isn't valid JSON
  }
});
2
Ben E

ブラウザーのセキュリティ制限のため、WebサーバーからWebページを実行する必要があります。最初にNode.jsがインストールされていることを確認してから、簡単な開発サーバーをインストールすることで、非常に簡単に実行できます。

npm install -g http-server

次に、コンソール/ターミナルから、コードが含まれるディレクトリに移動し、次を実行します。

http-server

最後に、JavaScriptコードを更新して、他のサーバー呼び出しで行うようにロードします。

async function loadJSON (url) {
  const res = await fetch(url);
  return await res.json();
}

loadJSON('../services/contributors.JSON').then(data => {
  console.log(data[0].name);
});

次に、http://localhost:8080（またはHTTPサーバーを実行したポート）からページをロードします。

2
Nathan Ridley