JavaScriptでJSONファイルをローカルから読み込みするには

JSONファイルを読み込みしたいとき...

jQueryだったらこういうコードを書きます。

▼ 外部からJSONを読込する

外部ならこれでOKなんですが・・・

問題は ローカルのJSONファイル を読み込む時。

その方法は2つあるのでまとめておきます。

ローカル読み込みはCORSエラーが出てしまう...

たとえばこういうコードを書いたとします。

▼ ローカルからJSONファイル読み込みしたい

▼ こんなエラーが出てしまった

お馴染みのCORSエラーです。

普通の方法だと読み込めないんです。

そこで解決策として次2つがあります。

方法1.Chromeで --disable-web-security を付けて起動

これは汎用的な方法ではありません。

こういう場合だけ有効な方法

  • テスト的にJSONを読み込みたい
  • Chromeブラウザを使っている

汎用的にするなら2つめを試してください。

一応紹介しておくと次の通り

 

やり方は起動時にオプションを付けるだけです。

▼ こういう起動オプションを付けて起動

Chromeのパスとかは各自で置き換え

でもいちいちコマンドラインで入力するのは面倒なので、ショートカットを作っておくと便利ですね。そうすればCORSエラーに悩まされずに開発できます。

まあChrome限定ということで。

方法2.JSONをローカルのjsファイルから読み込み

これはかなり汎用的な方法です。

方法を箇条書きするとこういう感じ

  • データを定義したjsファイルを作る
  • 目的のjsファイルを動的に読み込み
  • グローバル変数として参照する

これでJSONをそのままデータとして読み込めます。

 

1.JSONデータを持つjsファイル作成

▼ JSONというかデータそのものを定義

こういう内容のファイルをローカルに作成

名前は xxx.json.js とか分かりやすい名前でいいです。上コードだと window.SWEETS  というグローバルオブジェクトにそのままJSON(というかオブジェクトそのもの)を代入してます。

 

2.スクリプトから動的にJSONを読み込み

▼ コード例を挙げるなら次の通り(jQuery)

動的にscript要素を作って読み込み。

詳しくは次記事で解説したのでどうぞ。

この方法だとローカルに関係なくJSONファイル(正確にはオブジェクトそのもの)を読み込めるので、汎用性は高いです。もちろん埋め込みできるならJSON以外も読み込み可能ですね。(例えば Data URL でエンコードしたデータとか)

ローカルJSON読み込みのまとめ

要するに方法は次の2つということ

  1. Chromeで --disable-web-security を付けて起動
  2. JSONをローカルjsファイルから読み込み

もし「もっといい方法知ってる」という方は教えてください。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください