macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

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

JavaScript プログラミング

「jQueryを使ってJSONを読み込んだけど使い方がイマイチわからない」「これってそもそも使うシュチュエーションあるの」こんな疑問にお答えします。

初心者向けにわかりやすく解説していますので、独学でプログラミングを勉強している方は参考にどうぞ。

JSONって便利ですよね、jQueryを使えば扱い方も簡単になります、それが魅力ですね。

今回はJSONのデータを自前で用意した配列に入れ直す方法を紹介したいと思います。

また、実際の業務でどういった時に使うかも併せて紹介したいと思います。

注:これから紹介する記述例は初心者向けにわかりやすいよう冗長なものになっています、ご容赦ください。

スポンサードサーチ


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

事前にjQueryは読み込んでおきましょう。

最初にJSONファイルを用意をします。

JSONファイルを用意

test.json

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

なんて特色の無いデータだこと。( ´∀` )「まぁ、こんなものでいいでしょう」

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('読み込みに失敗しました');
  }
);

1行目、自前の配列を用意します。

11~14行目で読み込んだjsonを自前の配列dataに入れ直しています、簡単ですね。

これ需要あるの?→あります

あくまで記述例なのでこれ自体に需要はありません、配列で管理するという点で考えれば需要はあります。

例えばGoogleMapAPIとかで便利です。

店舗情報や土地の情報をJSONに用意し、配列に入れ直すことで情報を管理する事が可能です。

GoogleMapにマーカーを複数表示させたい時はかなり便利ですよ、名称、緯度、経度などを配列で管理できると楽です。

終わりに

いかかでしたでしょうか。

特に難しいこともなかったかと思います。

せっかくなので別の機会にでも、JSONを使ったGoogleMapAPIの使い方を解説してみようかなと思います。

わかりづらい部分があればコメント宜しくお願い致します。

以上になります。