jbuilderファイルから返ってくる値がundefinedになってしまう

Question

##実現したいこと
非同期で検索し、結果を書き換えて表示させたいのですが、jbuilderからjsファイルに返している値がundefinedになってしまいます。

##発生している問題・エラーメッセージ
非同期通信は成功するのに、jbuilderからjsファイルに返している値がundefinedになる

##該当のソースコード

index.html.erb

<div class="table-responsive ">
                <table class="table table-bordered bg-light">
                  <thead class="categries-index_teble">
                    <tr class="categries-index_text-color">
                      <th>
                        <a href="#" class="ajax-link">名前</a>
                        <i class="fa fa-fw fa-angle-down text-light"></i>
                      </th>
                      <th class="text-ilght categries-index_text-color">処理</th>
                    </tr>
                  </thead>
                  <tbody id="result">
                    <tr>
                      <td>
                        <input type="form" id="form" name="name" class="ajax-filter ajax-filter-input categories-index_namesearch">
                      </td>
                    </tr>
                    <% @categories.each do |category| %>
                    <tr class="column-data">
                      <td>
                          <%= link_to category.category_name, new_category_path(category.category_name), class: "ajax-link" %>
                      </td>
                      <td>
                          <%= link_to edit_category_path(category), class: "btn btn-primary ajax-link tip" do %>
                            <i class="fa fa-fw fa-edit"></i>
                          <% end %>
                          <%= link_to category_path(category), method: :delete, data: { confirm: "削除してよいですか？ <br> <strong>#{category.category_name}</strong>", cancel: 'キャンセル', commit: '削除'}, title: '削除の確認', class: "btn btn-danger tip" do %>
                          <i class="fa fa-fw fa-trash"></i>
                          <% end %>
                      </td>
                    </tr>
                    <% end %>
                  </tbody>
                </table>
              </div>

categoryies.controller.rb

class CategoriesController < ApplicationController
  def index
    @categories = Category.all
  end

  def new
    @category = Category.new
  end

  def create
    @category = Category.new(category_params)
    @category.save
    redirect_to categories_path
  end

  def destroy
    @category = Category.find(params[:id])
    @category.destroy
    redirect_to categories_path
  end

  def edit
    @category = Category.find(params[:id])
    redirect_to new_category_path
  end

  def search
    @categories = Category.where("category_name LIKE ?", "%#{params[:keyword]}%")
    # render json: @categories
    respond_to do |format|
      format.html
      format.json {
        render json: @categories
      }
    end
  end

  private
  def category_params
    params.require(:category).permit(:category_id, :category_name)
  end

end

index.json.jbuilder

json.categories @categories do |category|
  json.id category.category_id
  json.category_name category.category_name
end

category.js

$(document).on('keyup', '#form', function(e){
  e.preventDefault();
  var input = $.trim($(this).val());
  $.ajax({
    url: '/categories/search',
    type: 'GET',
    data: ('keyword=' + input),
    processData: false,
    contentType: false,
    dataType: 'json'
  })
  .done(function(data){
    $('tr.column-data').remove();
    $(data).each(function(category){
      console.log(data);
      console.log(category.category_name);
      $('#result').append(
        `<tr  class="column-data">
          <td>
            <a class="ajax-link" href="/categories/new/${category.id}">${ category.category_name}</a>
          </td>
          <td>
             <a class="btn btn-primary ajax-link tip" href="/categories/${category.id}/edit">
              <i class="fa fa-fw fa-edit"></i>
            </a>
            <a data-confirm="削除してよいですか <br> <strong>${category.category_name}</strong>" data-cancel="キャンセル" data-commit="削除" title="削除の確認"  class="btn btn-danger tip" rel="nofollow" data-method="delete"  href="/categories/${category.id}">
              <i class="fa fa-fw fa-trash"></i>
            </a>
          </td>
        </tr>`
      )
    });
  })
});

console.log(data)で取れている値

0: {id: 4, category_name: "これはテスト", created_at: "2020-08-23T22:38:51.000+09:00", updated_at: "2020-08-23T22:38:51.000+09:00"}
length: 1

##試したこと
・上記4ファイルの細かいミスを探した→解決に至らず
・ajaxのdata部の見直し→{ keyword: inuput } うまくいかず

ここまでテラテイルやスタックオーバーフロー等で同症状のエラー探しましたが、直接的な解決には至りませんでした。
どなたか解決方法がわかる方は、ご教示いただければ幸いです。
よろしくお願い致します！

Answer 1

// $(data).each(function(category){
$(data).each(function(index, category) {
// or 
$.each(data, function(index, category){

のような気がしましたmm

Comments

[takuya861]

解決しました！
よろしければ、なぜindexが必要なのか教えていただけませんか？

[unhappychoice]

https://api.jquery.com/jquery.each/

そういう仕様というか、1番目の引数には index で番号が渡されて、 2番目の引数に実際のデータが渡されるからですmm

`$(data).each(function(category) {...})` だと、 `category` には 0, 1, 2, 3 がはいっている感じです

[takuya861]

ありがとうございます！
そうなんですね、データの受け渡しの順番的にということなんですね。

すごく助かりました！