jQueryでJSONを読み込み配列に入れ直す方法【簡単実装】

jQueryを使ってJSONデータを配列に入れ直す

それでは早速見ていきましょう。

①：JSONファイルを用意

test.json

[
  {
    "name": "田中",
    "age": 20
  },
  {
    "name": "山田",
    "age": 30
  }
]

上記の構成でJSONを用意しました、めちゃくちゃシンプル。笑

②：jQueryで配列に入れ直す

var data = [];

$.ajax({
  type: 'GET',
  url: 'datas/test.json',
  dataType: 'json'
})
.then(
  function(json) {
    for(var i = 0; i < json.length; i++){
      data.push({
        'name': json[i].name,
        'age': json[i].age
      });
    };
    for(var i = 0; i < data.length; i++){
      console.log('私の名前は' + data[i]['name'] + 'です。');
      console.log('年齢は' + data[i]['age'] + '歳です。');
    }
  },
  function() {
    console.log('読み込みに失敗しました');
  }
);

以上。

まとめ：使い道について

あくまで記述例なのでこれ自体に需要はありませんが、データ自体はJSONファイルで管理して、使用する際はJSONを読み込んで配列に入れ直すロジックはよく使います。

例えば、GoogleMapAPIとかで便利です。店舗情報や土地の情報をJSONに用意し、配列に入れ直すことで情報を管理する事が可能です。GoogleMapにマーカーを複数表示させたい時はかなり便利、名称、緯度、経度などを配列で管理できると楽なんですね。

他の人が読んでいる記事