[JavaScript]JSONを読み込む

次に頂く案件ではJSONを使ってデータのやり取りをする様なので、JSONのデータ取得をお勉強してみます。

JSON軽い! 使いやすい! 便利! でした。

JSONの読み込み

XMLの時と読み込み方法を変えました。(以前はonreadystatechangeイベントハンドラメソッドを使っていました)

(function(){
 var xhr = new XMLHttpRequest();
 xhr.open('GET','./json/index.json',true);
 xhr.responseType = 'json';
 xhr.addEventListener('load',function(ev){
  if(ev.target.status == 200)
  {
   var jsonObj = xhr.response;
   var element;
   for(var s in jsonObj)
   {
    element = document.createElement('p');
    element.innerHTML = s+' = '+jsonObj[s]
    document.body.appendChild(element);
   }
  }
  else
  {
   console.log('error');
  }
 });
 xhr.send(null);
})();
{
 "var0":"一つ目の要素",
 "var1":"二個目だよ",
 "var2":123,
 "arr0":["いっこ","にこ","さんこ"]
}
<body>
 <p>var0 = 一つ目の要素</p>
 <p>var1 = 二個目だよ</p>
 <p>var2 = 123</p>
 <p>arr0 = いっこ,にこ,さんこ</p>
</body>

responseTypeを指定する事で、レスポンスをオブジェクトとして処理している様です。

簡単で良いですね。

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>