macoblog

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

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

JavaScript

この記事では、JSONデータを自前で用意した配列に入れ直す方法について解説しています。プログラミング初心者の方や、独学でプログラミングを勉強している方は参考にどうぞ。また、実際の業務でどういった時に使うかも併せて紹介したいと思います。

目次【本記事の内容】 [ click ]

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

今回はjQueryを使用しますので事前にjQueryを読み込んでおいてください、CDN経由でjQueryの最新版をコピペしておけば問題ありません。コピペで使えるスクリプトに関しては【2022年版】jQuery最新は3.6.0/コピペで使えるスクリプトも紹介を参考にどうぞ。

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

①: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('読み込みに失敗しました');
  }
);
1行目、自前の配列を用意します。
11~14行目、読み込んだjsonを自前の配列dataに入れ直しています。

以上。

まとめ:使い道について

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

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

WEBトマトWEBトマト

フロントエンドエンジニアを目指している方はJSONファイルの扱い方はマストで理解しておきましょう、WEB制作系を目指すならjQueryと相性良いですし、最近だとVueやReact環境下でaxiosを使ってJSONを配列に入れ直して使う事が多いですかね。