2016/2/17更新

jQueryでjsonファイルを読み込む方法：getJSON()

今回は、jQueryでjsonファイルを読み込む方法を説明します。

JSONファイルを読み込むgetJSON()

getJSON( url [, data] [, callback] )

1	getJSON( url [, data] [, callback] )

外部jsonファイルを読み込むには、「$.getJSON」メソッドを使用します。

jsonファイルを読み込むだけの場合は、urlとcallbackだけ指定することが多いです。

getJSON()を使って、sample.jsonを読み込みアラート表示する簡単なサンプルです。

sample.json

{"first_name":"一郎","last_name":"鈴木"}

1	{"first_name":"一郎","last_name":"鈴木"}

jQuery

$.getJSON("sample.json", function(json){
    alert(data.last_name + data.first_name);// 鈴木一郎とアラート表示
})

$.getJSON("sample.json", function(json){

alert(data.last_name + data.first_name);// 鈴木一郎とアラート表示

})

jsonは{名前:値}のセットで記述されています。

受け取ったjsonファイルは、サンプルでは「json」という変数に格納され、「json.名前」で値を取り出すことができます。

第二引数dataには、Map型でリクエストパラメータを追加することができ、APIのリクエストパラメータを指定したい時などに使えます。

例えば、dataに{category:"person"}と指定した場合の例です。

jQuery

$.getJSON(
  "http://sample.com/api?", 
  {category:person}, 
  function(json){
    //レスポンスに対する処理
  }
)

$.getJSON(

"http://sample.com/api?",

{category:person},

function(json){

//レスポンスに対する処理

}

)

dataに指定された値は、リクエスト前にURLエンコードされた文字列に変換されurl（http://sample.com/api?）にパラメータとして追加されます。

つまり、「http://sample.com/api?category=person」というURLに対してリクエストがされることになります。

jQuery