RailsとjQueryでぐるなびAPIを使う

# はじめに
Railsアプリ制作で飲食店情報を取得したかったところ、表記APIを見つけたので、導入することにしました。
# 完成イメージ
記事登録時にキーワードを入力すると、該当した店舗名をリスト表示させます。
[![Image from Gyazo](https://i.gyazo.com/ae4d008356cc25dbee54bffc1169fb3b.gif)](https://gyazo.com/ae4d008356cc25dbee54bffc1169fb3b)

# ぐるなびAPIとは
ぐるなびが提供しているAPIです。
サイトに掲載されている店舗のデータを抽出することができます。
詳しいリクエストパラメータは[こちら](https://api.gnavi.co.jp/api/manual/restsearch/)

# アクセスキー取得
データを取得するにはアクセスキーが必要なため、まずは下記リンクで新規登録します。
https://api.gnavi.co.jp/api/

新規登録が完了したら、アクセスキーが記載されたメールが届きます。

# パラメータ取得方法
今回はレストラン検索APIを使用します。
アカウント作成時に入手したアクセスキーを指定のURLの末尾に記載することで、
リクエスト時必要なデータを取得することが出来ます。

~~~
https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid={発行したアクセスキー}
~~~
[テストツール](https://api.gnavi.co.jp/api/tools/?apitype=RestSearchAPI)も用意されているので、
こちらでURLの記述、取得する値を確認できます。

私は今回店舗名から検索したかったので、
下記のようなURL表記になります。
[![Image from Gyazo](https://i.gyazo.com/a69d58106325cff67b41ecccc5392ea7.png)](https://gyazo.com/a69d58106325cff67b41ecccc5392ea7)

# アプリに実装する
### jQuery

~~~javascript
$(function(){
  var url = "https://api.gnavi.co.jp/RestSearchAPI/v3/"
  var params = {
    keyid: "{発行したアクセスキー}",
    name: ""
  };
  var counts = []
  var showResult = function(result){
    result.rest.map(function(ele, index){
      $("#ul").append(`<li id="list"><input type="checkbox" data-id=${index} id="checkbox">${ele.name}</li>`);
      ele.num = index;
      counts.push(ele);
    });
  }
  $(document).on("click", "#search", function(){
    counts.length = 0;
    $("#ul").empty();
    params.name = $("#key").val();
    $.getJSON(url, params, function(result){
      showResult(result);
    });
  });
  $(document).on("change", "#checkbox", function(){
    var sel = $('#checkbox:checked').data('id');
    $("#rest_name").val("");
    $("#rest_url").val("");
    $.each(counts, function(index, count){
      if (sel == count.num){
        $("#rest_name").val(count.name);
        $("#rest_url").val(count.url);  
      }
    })
  })
})
~~~
### html

~~~ruby
<%= form_for @post do |f| %>
<!-- 省略 -->
　<%= f.fields_for :restaurant, @post.restaurant || Restaurant.new do |p|%>  
        <div class="field" id="restaurant-field">
          <%= f.label "店舗", class: "label" %>
          <input class="input" type="text" id="key" placeholder="キーワードを入力してください">
          <input class="button is-warning" type="button" id="search" value="検索">
          <p class="error">
            <%= @post.errors.full_messages_for(:"restaurant.name")[0] if @post.errors.any? %>
          </p>
          <ul id="ul"></ul>
            <%= p.hidden_field :name, id: "rest_name" %>
            <%= p.hidden_field :url , id: "rest_url" %>
        </div>
      <% end %>
<!-- 省略 -->
~~~
検索ボタンが押された際のイベント処理です。
`変数params`に入力したキーワードを代入し、
`getJSONメソッド`を使用し、json形式でデータを取得します。

~~~javascript
$(document).on("click", "#search", function(){
    counts.length = 0;
    $("#ul").empty();
    params.name = $("#key").val();
    $.getJSON(url, params, function(result){
      showResult(result);
    });
  });
~~~
取得したデータをHTML要素として指定の要素に追加していきます。
`data-id`と取得した値を保管している`変数counts`は、
後ほど値を保存する際に使用します。

~~~javascript
var counts = []
  var showResult = function(result){
    result.rest.map(function(ele, index){
      $("#ul").append(`<li id="list"><input type="checkbox" data-id=${index} id="checkbox">${ele.name}</li>`);
      ele.num = index;
      counts.push(ele);
    });
  }
~~~
選択した値を保存する際の処理です。
チェックされたチェックボックスの`data-id`を取得して、
先ほど`変数counts`に保管していた取得データのキーnumと番号が同じなら、
HTMLに用意してたhidden_fieldに値を追加します。

~~~javascript
$(document).on("change", "#checkbox", function(){
    var sel = $('#checkbox:checked').data('id');
    $("#rest_name").val("");
    $("#rest_url").val("");
    $.each(counts, function(index, count){
      if (sel == count.num){
        $("#rest_name").val(count.name);
        $("#rest_url").val(count.url);  
      }
    })
  })
~~~