JavaScriptで外部のローカルJSONファイルを読むには?
JSONファイルをローカルシステムに保存し、そのJSONファイルを読み込んでデータを出力するためのJavaScriptファイルを作成しました。以下がそのJSONファイルです。
{"resource":"A","literals":["B","C","D"]}
これがJSONファイルのパスだとします。/Users/Documents/workspace/test.json
です。
誰か、JSONファイルを読み込んで、その中のデータをJavaScriptで表示する簡単なコードを書くのを手伝ってくれませんか?
209
20
JavaScriptを使用して外部ローカルJSONファイル(data.json)を読み取るには、まずdata.jsonファイルを作成します。
1。 スクリプトソース内のjsonファイルのパスとJavaScriptファイルについて言及します。
2。 jsonファイルからオブジェクトを取得します。
詳細については、この参照を参照してください。
ハードディスクからの
。json
ファイルのロードは非同期操作であるため、ファイルをロードした後に実行するコールバック関数を指定します。この関数は、mime typeパラメータを
" text / html "
、"text / plain"
などにオーバーライドすることにより、.html
または.txt
ファイルのロードにも機能します。リクエストはHTTPで行われるため、ローカルリソースにAJAXコールを行うことはできません。
回避策としては、ローカルのウェブサーバを実行し、ファイルを提供し、ローカルホストにAJAXコールを行うことができます。
JSONを読むためのコードを書くのに役立つという点では、
jQuery.getJSON()
のドキュメントを読むとよいでしょう。http://api.jquery.com/jQuery.getJSON/
1。 まず、jsonファイルを作成します。 この例では、私のファイルはwords.jsonです。
。
。
2。 これが私のコード、つまりnode.jsです。
readFileSync
への'utf8'
引数に注意してください。これにより、Buffer
(JSON.parse
で処理できますが)ではなく、文字列が返されます。 結果を確認するためにサーバーを作成しています。..。
。
3。 特定のIDの詳細を読みたい場合は、コードを次のように指定できます。.
。
Node.jsの場合、またはブラウザでrequire.jsを使用する場合の場合、次のことができます。
注意:ファイルは1回ロードされ、後続の呼び出しではキャッシュが使用されます。
フェッチAPIを使用するのが最も簡単なソリューションです。
Firefoxでは完璧に機能しますが、Chromeではセキュリティ設定をカスタマイズする必要があります。
お使いのブラウザによっては、ローカルファイルにアクセスすることができます。しかし、あなたのアプリのすべてのユーザーにとって、これが機能するとは限りません。
これを行うには、ここからの手順を試してみてください。http://www.html5rocks.com/en/tutorials/file/dndfiles/
ファイルが読み込まれると、次のようにしてデータを取得できます。
ローカルファイルを使用している場合は、データをjsオブジェクトとしてパッケード化しないでください?
data.js 。
MyData.resource
を直接使用してください。とても簡単です。
。 jsonファイルの名前を「.json」ではなく「.js」に変更します。
。
したがって、通常、コードに従ってください。
ただし、参考までに、私のjsonの内容は、以下の切り取りのように見えます。
。 前に多くの人が述べたように、これはAJAX呼び出しを使用して機能しません。 しかし、それを回避する方法があります。 入力要素を使用して、ファイルを選択できます。
選択したファイル(.json)には、次の構造が必要です。
。
次に、FileReader():を使用してJSを使用してファイルを読み取ることができます。
$ .getJSONを使用し、次に$ .eachを使用して、キー/値のペアを反復します。 JSONファイルと機能コードのコンテンツの例:
XMLHttpRequest()メソッドを使用できます。
console.logステートメント(コメントアウト)を使用してmyObjの応答を確認できます。
AngularJSを知っている場合は、$ http:を使用できます。
ファイルを別のフォルダーに持っている場合は、ファイル名の代わりに完全なパスを指定してください。
Webアプリケーションを使用しているため、クライアントとサーバーを使用している可能性があります。
ブラウザーのみがあり、ブラウザーで実行されているJavaScriptからローカルファイルを読みたい場合は、クライアントしかいないということです。 セキュリティ上の理由から、ブラウザはあなたにそのようなことをさせてはなりません。
ただし、lauhubが上記で説明したように、これはうまくいくようです。
http://www.html5rocks.com/en/tutorials/file/dndfiles/。
その他の解決策は、マシンのどこかにWebサーバー(Windowsの場合は小さな、Linuxの場合はサル)をセットアップし、XMLHttpRequestまたはD3ライブラリを使用して、サーバーにファイルをリクエストして読み取ります。 サーバーはローカルファイルシステムからファイルを取得し、Web経由で提供します。
新しいXMLHttpRequestインスタンスを作成し、jsonファイルの内容をロードする必要があります。
このヒントは私にとってはうまくいきます(https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript):
簡単な回避策の1つは、ローカルで実行されているサーバー内にJSONファイルを配置することです。 そのためには、ターミナルからプロジェクトフォルダーに移動し、ローカルサーバーを8181などのポート番号で起動します。
次に、 http://localhost:8181 / を参照すると、JSONを含むすべてのファイルが表示されます。まだ持っていない場合は、pythonをインストールしてください。
Stano / Meetarが上でコメントした内容が好きでした。 .jsonファイルを読み取るために使用します。 Promiseを使用して、彼らの例を拡張しました。 同じためのプランカーです。 https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p =プレビュー。
JSONの読み取りは、DRYの別の関数に移動できます。しかし、ここでの例は、約束の使用方法を示すことです。
ES6モジュールのようにインポートできます。
もし、ローカルのウェブサーバーを動かすことができ(上記のChris Pの提案のように)、jQueryを使うことができるなら、http://api.jquery.com/jQuery.getJSON/ を試すことができます。
D3を使用してコールバックを処理し、ローカルJSONファイル
data.json
を次のようにロードできます。Stano'sの優れた答えを取り、約束に包みました。 これは、ファイルシステムからjsonファイルをロードするためにフォールバックするノードやWebパックなどのオプションがない場合に役立ちます。
このように呼び出すことができます。