変数の表示ができない Uncaught ReferenceError: category is not defined

Question

##インクリメンタルサーチで検索したデータがundefinedで表示される

jQueryを使った、インクリメンタルサーチを実装しているのですが検索結果の書き換えはできているのですが変数がうまく設定できていないようで、結果がundefinedとなります。

category.jsの

$('tr.column-data').remove();

後にconsole.log(data)をおくと値が取れましたが、console.log(category.category_name)だと値がundefinedになりました。
jsonに値が渡せていないことが原因かと思うのですが、どこがおかしいのかわかりません。

拙い質問で申し訳ありませんがどなたかアドバイスいただけると幸いです。

エラー文

Uncaught ReferenceError: category is not defined
    at Object.<anonymous> (VM4922 category.self-0b71d523ea38b26c3ca5a6b2349063b119f2f4d5b93c0c6af7433813c11dfeca.js:165)
    at fire (jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:3497)
    at Object.fireWith [as resolveWith] (jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:3627)
    at done (jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:9787)
    at XMLHttpRequest.<anonymous> (jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:10048)

index.htm.rb

<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>

category.js

$(document).on('keyup', '#form', function(e){
  e.preventDefault();
  var input = $.trim($(this).val());
  console.log(input)
  $.ajax({
    url: '/categories/search',
    type: 'GET',
    data: ('keyword=' + input),
    processData: false,
    contentType: false,
    dataType: 'json'
  })
  .done(function(data){
    $('tr.column-data').remove();
    console.log(category.category_name);
    $(data).each(function(category){
      $('#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>`
      )
    });
  })
});

index.json.jbuilder

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

Answer 1

category.jsですが、恐らく、$(data).eachメソッドの引数に渡されているfunctionの引数としてcategoryが定義されているにも関わらず、その前の行でconsole.logでcategoryを使用しようとしているためにエラーとなっています。

console.log(category.category_name);
$(data).each(function (category) {
  $('#result').append(

console.logを$(data).eachの中に移動させてみてください。

Comments

[takuya861]

ありがとうございます！

ご指摘の通り移動させてみました！
値は取れているのですが、表示がundefinedになるのですが、これは${ category.category_name}がまちがっているんでしょうか？