ダッシュで奪取

SESでPL/SQLを書いていました。Web系にチェンジしたい!ので勉強中です。

【jQuery&JavaScript】jsonファイルを読み込みたい

目次

  1. やりたいこと
  2. jQueryで書いた場合
  3. JavaScriptで書いた場合
  4. 参考URL

データは下記よりお借りしました。
kotofurumiya/pokemon_data: 全ポケモンのJSONデータです。

1. やりたいこと

  • jsonファイルを用意して、取りあえず全件読み込んでコンソールに出力
  • 適当に検索するとjQueryでのやり方がたくさんヒットするけど、JavaScriptでも書きたい

2. jQueryで書いた場合

// pokemon_data.jsonファイルを読み込んで、pokemonで受け取る
$.getJSON("pokemon_data.json", function (pokemon) {
  $.each(pokemon,function(index,data) {
    console.log(data);
  });
});

$.getJSON

$.getJSON( url, リクエスト成功時の処理 );
  • HTTPのGET通信を行う + json形式のデータを受け取る

$.each

$.each(ループしたい対象,function(インデックス番号,1つずつの要素を入れる変数) {  
  〜ループ処理  
});
  • ループ処理

これで読み込めそうなので、コンソールで確認。

f:id:kyoruni:20190726103201p:plain

あれ…?

ローカルで実行した結果、どうやらクロスドメイン制約というものに引っかかっているみたいです。

  • クロスドメイン制約
    • そのHTMLが置かれているサーバーと、同一サーバー上としか通信ができないという制約。

【解決法】 ターミナルから下記コマンドを実行し、セキュリティを外した状態でChromeを起動する。

open /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir

f:id:kyoruni:20190725123532p:plain

ちゃんと読み込めました!良かった!

3. JavaScriptで書いた場合

// pokemon_data.jsonファイルを読み込んで、pokemonで受け取る
// XMLHttpRequestのオブジェクト作る
var json = new XMLHttpRequest();

// 読み込みステータスが変わる度に呼ばれる
json.onreadystatechange = function() {
// 読み込み完了時、jsonファイルをオブジェクトに変換
if ( json.readyState === 4 && json.status === 200) {
  var pokemon = JSON.parse(json.responseText);
  console.log(pokemon);
  }
}
// リクエストを作ってサーバーに送信
json.open("GET", "pokemon_data.json");
json.send();

これで同じように動いてくれました!良かった!
※ローカルだと駄目そうだったので、諦めてサーバーにアップしました

XMLHttpRequest

サーバと通信してデータを受け取るオブジェクト。

XMLHttpRequest.onreadystatechange

XMLHttpRequest.readyStateの値が更新する度に呼ばれるイベント。

XMLHttpRequest.readyState

XMLHttpRequestの、通信の状態を表すプロパティ。

  • 4・・・読み込み完了

XMLHttpRequest.status

XMLHttpRequestのステータスを表すプロパティ。

  • 200・・・OK
  • 404・・・not found

JSON.parse(変換したいもの)

読み込んだjsonファイルはresponseTextの形になっているので、
処理の中で使えるよう、オブジェクトにするメソッド。

XMLHttpRequest.open(使いたいリクエスト, リクエストを送りたいもの)

新しいリクエストを作成するメソッド。
GET以外にも、POST・DELETEとかも渡せます。

XMLHttpRequest.send()

リクエストをサーバーに送信するメソッド。

4. 参考URL