【jQuery】ajaxでjsonのファイルを取得と表示する方法

こんにちは、nishi_talk(@nishi_talk)です。
jqueryを使ってajaxでjsonのファイルを取得する方法をご紹介します。ある特定の商品ごとに「商品名」「値段」を切り替えるjs処理を実装しました。
管理しやすいように商品情報をまとめたjsonファイルを用意します。
それをajaxで取得してきて対象の商品ごとに出力をしたいと思います。 ajaxを普段扱う場面がなかったので、基本を振り返るいい機会になったので備忘録として。。。

jsonを用意

まずはjsonのデータを用意。
今回は例として、file.jsonを作成し、その中に商品情報を記載します。 typeキーに商品名・priceキーに金額を設定します。

{
  "1": {
    "type": "商品名001",
    "price": "100"
  },
  "2": {
    "type": "商品名002",
    "price": "200"
  },
  "3": {
    "type": "商品名003",
    "price": "300"
  }
}

jsonを取得

file.jsonを取得する場合で記載します。 urlで取得するファイル名を指定。dataTypeでファイルの形式を指定します。

$(function() {
  $.ajax({
    type: 'GET',
    url: 'file.json',
    dataType: 'json'
  })
  .then(
    // 取得成功時
    function (json) {
    },
    function () {
      // エラー発生時
      alert('エラー時に表示されるテキスト');
    }
  );
});

これでjson内にあるデータを取得できます。

jsonを出力

取得したjsonのデータを出力します。

json[1].type //商品名001
json[1].price //100

これを先程の、記述に追加してjsonを取得成功時に出力するにはこんな感じです。

$(function() {
  $.ajax({
    type: 'GET',
    url: 'file.json',
    dataType: 'json'
  })
  .then(
    // 取得成功時
    function (json) {
      json[1].type //商品名001
      json[1].price //100
    },
    function () {
      // エラー発生時
      alert('エラー時に表示されるテキスト');
    }
  );
});