都道府県の店舗APIをたたく時のSample

仕様について

• 各エリアの都道府県の店舗を取得
• 都道府県ごとにAPIが存在する
• 各エリアをクリックすると都道府県と店舗が表示される

JSON

sample.json

{
  "stores": [
    {
      "id": 1,
      "name": "A店",
    },
    {
      "id": 2,
      "name": "B店",
    },
    {
      "id": 3,
      "name": "C店",
    }
  ]
}

HTML

※エリアは3つに絞りました

sample.html

<div class="prefecture"></div>
<ul>
  <li><a href="javascript:void(0);" class="areaLink">東北エリア</a></li>
  <li><a href="javascript:void(0);" class="areaLink">関東エリア</a></li>
  <li><a href="javascript:void(0);" class="areaLink">中部エリア</a></li>
</ul>

javascript

• urlの設定はダミーになります
• 都道府県コードはこちらを参照

sample.js

var areaApiGet = {
  init: function() {
    var self = this;
    self.areaLinkHtml = '.areaLink';
    self.prefectureHtml = '.prefecture';
    self.areaListClick();
  },
  areaListClick: function() {
    var self = this;
    $(self.areaLinkHtml).on('click', function() {
      $(self.prefectureHtml).html('');
      var num = $(this).parent().index();
      self.areaCategorySelect(num);
    });
  },
  areaCategorySelect: function(num) {
    var self = this;
    var prefectureArray = [];
    var prefectureName = [];
    if (num === 0) {
      prefectureArray = [02, 03, 04, 05, 06, 07];
      prefectureName = ['青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県'];
      self.ajaxApi(prefectureArray.length, prefectureArray, prefectureName);
    } else if (num === 1) {
      prefectureArray = [08, 09, 10, 11, 12, 13, 14];
      prefectureName = ['茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県'];
      self.ajaxApi(prefectureArray.length, prefectureArray, prefectureName);
    } else if (num === 2) {
      prefectureArray = [15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
      prefectureName = ['新潟県', '富山県', '石川県', '福井県', '山梨県', '長野県', '岐阜県', '静岡県', '愛知県', '三重県'];
      self.ajaxApi(prefectureArray.length, prefectureArray, prefectureName);
    }
  },
  ajaxApi: function(prefectureNum, prefectureArray, prefectureName) {
    var self = this;
    var i;
    var count = 0;
    for (i = 0; i < prefectureNum; i++) {
      $.ajax({
        type: 'GET',
        data: {
          'prefecture':  prefectureArray[i],
        },
        url: '/api/sample.json',
        dataType: 'json',
      })
      .done(function(data) {
        count++;
        var dataArray = data.stores;
        $(self.prefectureHtml).append('<h3>' + prefectureName[count - 1] + '</h3>');
        $.each(dataArray, function(j) {
          $(self.prefectureHtml).append('<p>id: ' + dataArray[j].id + ' name: ' + dataArray[j].name + '</p>');
        });
      })
      .fail(function() {
        console.log('error');
      });
    }
  }
}
$(function() {
  areaApiGet.init();
});

APIリクエスト

url

https://xxxx.com/api/sample?prefecture=xx