【Ruby on Rails + jQuery】$.ajaxによってコントローラに送って返された値がundefinedとなる

Question

解決したいこと

非同期の検索機能を実装したい。

状況

想定される流れ

1. railsのview中のフォームで入力された文字を取得し、$.ajaxによってrailsのcontrollerに送信。
2. controller中で検索した値をjson.jbuilderを通してjavascriptファイルに返す。
3. 返された値を用いてrailsのviewファイルに表示する

うまくいっていること

• keyupによる発火。
• railsのcontrollerファイルへのデータ送信
• controllerファイルでの検索機能。format.jsonの直前でインスタンス変数@instrumentsの中には検索された値が含まれていた。

うまくいかないこと

• 流れの2.の部分で返される値がundefined

ソースファイル

search.js

$(function () {
　# 省略。別画面で用いる検索機能に関する記述であるため。

  function instrumentCandidate(result) {
    var html = `<div class"search-result__instrument-candidate", data-instrument_id="${result.id}">${result.name}</div>`;

    return html;
  }

  $("#search_instrument_name").on("keyup", function () {
    var input = $("#search_instrument_name").val();
    if (input == "") {
      $(".content__search-result").empty();
      return;
    }
    $.ajax({
      type: "get",
      url: "/instruments/search",
      data: {
        keyword: input,
      },
      dataType: "json",
    }).done(function (results) {
      // ここでコンソール表示をしているresultsがundefinedとなっている
      console.log(results);
      $(".content__search-result").empty();
      var insertHTML = "";

      $.each(results, function (i, result) {
        console.log(result);

        insertHTML += instrumentCandidate(result);
        if (i == 4) return false;
      });

      $(".content__search-result").append(insertHTML);
    });
  });
});

routes

Rails.application.routes.draw do
# 省略
  resources :instruments, except: :index do
    collection do
      get :search
    end
  end
  resources :tuning_alls, except: :show
  resources :finger_alls, except: :show
end

instruments_controller.rb

class InstrumentsController < ApplicationController
  def search
    params[:keyword].strip!
    keywords = params[:keyword].split(/\s/)
    @instruments = Instrument.all
    keywords.each do |keyword|
      @instruments = @instruments.where("name like ?", "%#{keyword}%")
    end

    respond_to do |format|
      # ここでbinding.pryを用いて@instrumentsの中身を調べた値を下に示す。
      format.html
      format.json
    end
  end
end

  Instrument Load (0.3ms)  SELECT `instruments`.* FROM `instruments` WHERE (name like '%b%')
  ↳ app/controllers/instruments_controller.rb:22
=> [#<Instrument:0x00007f85ef8d5230
  id: 1,
  name: "5strings banjo",
  total_string: 5,
  created_at: Thu, 14 May 2020 22:54:09 JST +09:00,
  updated_at: Thu, 14 May 2020 22:54:09 JST +09:00>]

search

json.array! @songs do |song|
  #省略。別の検索機能で用いる記述のため
end
json.array! @instruments, :id, :name, :total_string

instrumentテーブル

new.view(参考)

この画面で検索した結果を表示します。
結果データと、ユーザーがフォームで記入した内容をcreateアクションに送信する機能を実装する予定です。

.content
  =form_with url: tuning_alls_path, method: :post, local: true do |f|
    .content__instrument-name
      =f.text_field :instrument_name, id: "search_instrument_name", placeholder: "楽器名称"
      =f.text_field :instrument_id, class: "form_blind"
    .content__search-result

仮説と検証

json.jbuilderの記述ミス

理由

コントローラの時点ではインスタンス変数に正常にデータが格納されている。また$.ajaxに接続しているメソッドdone自体は動作しているため、コントローラ→jqueryの間にあるjbuilderファイルが怪しい。

###試した記述
参考サイト

json.array! @instruments do |instrument|
  json.id instrument.id
  json.name, instrument.name
  json.total_string instrument.total_string 
end

json.instrument do
  json.array! instruments, :id, :name, :total_string
end

結果

変化なし

---

正直、何が何やらという感じです。
うまく動作している非同期の検索機能のソースを見て比較してみましたが違いも見当たりません。

お力いただけると幸いです。

Answer 1

railsのコントローラ→json.jbuilderファイルへのルーティング

誤りの記述

json.array! @songs do |song|
  #省略。別の検索機能で用いる記述のため
end
json.array! @instruments, :id, :name, :total_string

問題点

controller→jbuilderファイルへのルーティング

• コントローラと同じ名称のviewフォルダ直下に、コントローラ内に記述した関数と同じ名がついたjson.jbuilderファイルを用意し、そこにjbuilderの記述を行う必要があった。
• 「誤りの記述」のように記述することで@songのコントローラ内で用意したsearchアクションも動作しなくなっていた。

正しい記述

• ディレクトリ名称：

views > instruments > search.json.jbuilder

json.array! @instruments, :id, :name, :total_string

• ディレクトリ名称：

controllers > instruments_controller.rb

# 定義された名前が重要↓
def search
  params[:keyword].strip!
  keywords = params[:keyword].split(/\s/)
  @instruments = Instrument.all
  keywords.each do |keyword|
    @instruments = @instruments.where("name like ?", "%#{keyword}%")
  end

# これは定番の書き方
  respond_to do |format|
    format.html
    format.json
  end
end

rails×json.jbuilderファイルに関する情報は日本語だとあまりネットで見当たらないので解決出来てよかったです。