rails JSで取得した値(api)をrails上で扱い、データベースに保存したい

Question

・実現したいこと
楽天APIでゴルフ場名をJSで取得し、その値をrailsでデータベースに保存したい。
検索でヒットしたゴルフ場名一覧をvIEWで表示し（ここまで実装済み）、それをリンクにして、クリックすると、そのゴルフ場名をデータベースに保存したい。

・わからないこと
どうやってJSで取得した値を、railsに渡したらよいかわからない。

都道府県とキーワードを入力してAPIを叩き、それをJQueryでHTMLに渡しています。
そもそもJSからrailsに値を渡すことが可能なのかどうかもわからない状態です。

・やってみたこと
JQueryの.append内に、<% %>で色々書いてみましたが、当然かもしれませんが、文字列としてあつかわれてしまい、
どうしたらよいかわからない状態です。
アドバイス等、宜しくお願い致します。

//index.js
window.onload = function() {
    document.getElementById("search").onclick = function() {
        $("#add_test").empty();
        var japanese = $("#coursenameform").val();
        var keyword = encodeURI(japanese);
        var areaCode = $("#color1").val();

        $.ajax({
            url: "https://app.rakuten.co.jp/services/api/Gora/GoraGolfCourseSearch/20170623?format=json" +
                "&areaCode=" +
                areaCode +
                "&keyword=" +
                keyword +
                "&applicationId=1234567890",
            type: "GET",
        }).done(function(data) {
            var course_number = data.count;
            for (var i = 0; i < course_number; i++) {
                console.log("done", data.Items[i].Item.golfCourseName);
                $("#add_test").append(
                    $("<li />", {
                        text: data.Items[i].Item.golfCourseName,
                    })
                );
            }
        });
    };
};

<!--new.html.erb-->
 <input type="serch" id="coursenameform">
 <form name="areaform">
    <select id="color1">
        <option value="0">全地域</option>
        <option value="101">北海道・東北のすべて</option>
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="102">関東のすべて</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="103">北陸のすべて</option>
        <option value="104">中部のすべて</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="105">近畿のすべて</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="106">中国のすべて</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="107">四国のすべて</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="108">九州・沖縄のすべて</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
        <option value="109">海外</option>
    </select>
 </form>
 <button id="search">検索</button>
 
 <ul id="add_test">
 </ul>

下画像のように、キーワードと都道府県を入力させ、検索結果がその下の５つのゴルフ場になります。（この処理はJS）この５つの部分をリンクにして、クリックすると、そのゴルフ場の名前をデータベースに保存したい。現状は、
jQueryで.append($("<li />", {text: data.Items[i].Item.golfCourseName,})でタグを生成しているだけになります。

Comments

[m.ts10806]

＞JSからrailsに値を渡す

サーバーサイドに渡したいのでしょうか
クライアントサイドで扱いたいのでしょうか

[hurousyotoku500]

サーバーサイドですね。

[m.ts10806]

渡した後、どう扱うつもりですか？
そのあたりも含めて質問本文に追記してください。

[hurousyotoku500]

どう扱うかまではまだ具体的にはきめていません。

Answer 1

APIを叩いて返ってくるデータはjson形式だと思うのですが、それは合ってますかね？

たぶんjsonなので、そこから欲しいデータを取り出して、変数に代入し、フォームに入力させれば良いと思うのですが…

Comments

[hurousyotoku500]

ご回答ありがとうございます。データ形式はjsonですね。
そのjsonデータを取得する処理はJSで、その値をどのようにrailsで処理したら良いかわからず困っております。

[kokitail]

jsonから欲しい値は取り出せてますか？

[hurousyotoku500]

はい、上記コードで問題なく表示できています。

[kokitail]

そしたらフォームを用意しておいて、その中にjsonから取り出した値を入力して送信 -> コントローラを用意してデータを保存できないですか？

[hurousyotoku500]

「フォームを用意しておく」とは、erb上でということでしょうか？

[kokitail]

そうですね。そのほうが簡単かと思います

[hurousyotoku500]

すみません、どのように書いたら良いか検討もつきません。ヒントいただけないでしょうか

[kokitail]

先ほどから書いてる手順のとおりとしか言いようがないのですが、、、

アプリの構造がわからないのでなんとも言えませんがもう少し具体的に書くと次のような感じですかね

APIを叩きにいくhtmlファイルにform_forなどでフォームを用意（urlを指定して登録するコントローラが動くようにする）
jsでAPIから取得した値をinputに入力（用意したinputタグを取得してvalueをセット）

データを登録するルーティングやコントローラが用意されてなければ作る必要があります

こちらとしても何が分からないか分からないとアドバイスが難しいです。。。

[hurousyotoku500]

情報追記させていただきました。そもそもになってしましますが、現状APIを叩く処理はJSですが、ここもruby(コントローラ)で書いた方が良いということでしょうか。

[kokitail]

APIを叩くのはコントローラで叩かなくても大丈夫です
実装内容によってはそうしたほうがいい場合もありますが