レンダリング先のhtmlが表示されない

Question

前提・実現したいこと

学習歴2ヶ月の初心者です。
モーダル内の検索フォームで検索すると、ホットペッパーAPIから条件にあった店舗一覧が非同期でモーダル内に表示される機能を実装しようとしています。
検索結果のデータはハッシュでちゃんと取得していることは確認しているので、レンダリング時にそのデータを渡せていないのだと思うのですが、解決方法がわかりません。
どなたかご教授いただければ幸いです。よろしくお願いします。

発生している問題・エラーメッセージ

ActionView::Template::Error (undefined local variable or method `restaurants' for #<#<Class:0x0000000005a62a70>:0x00007efda9fb6a78>
Did you mean?  @restaurants):

該当のソースコード

posts.new.html.erb

  <!--モーダル部分-->
         <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
           <div class="modal-dialog modal-xl" role="document">
             <div class="modal-content">
               <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalLongTitle">ホットペッパーで店舗情報を検索</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
                 </button>
               </div>
               <div class="modal-body row">
                 
                 <div class="col-sm-3">
                   <h4><i class="fas fa-search"></i>&ensp;検索条件</h4>
                   <%= form_with url: new_post_path, method: :get, remote: true do |f| %>
                   <div class="d-flex flex-column form-group">
                     <%= f.label "キーワード", class: "" %>
                       <% if @keyword.present? %>
                         <%= f.text_field :keyword, value: @keyword, class: "form-control" %>
                       <% else %>
                         <%= f.text_field :keyword, class: "form-control" %>
                       <% end %>
                   </div>
                   
                   <div class="large_area d-flex flex-column form-group">
                     <%= f.label "都道府県", class: "" %>
                       <% if @large_area_selected.present? %>
                         <%= f.collection_select :large_area_select, @large_areas, :large_area_code, :name, { selected: @large_area_selected }, class: "form-control" %>
                       <% else %>
                         <%= f.collection_select :large_area_select, @large_areas, :large_area_code, :name, { prompt: "選択してください" }, class: "form-control" %>
                       <% end %>
                   </div>
                   
                   <div class="d-flex flex-column form-group">
                     <%= f.label "エリア", class: "" %>
                       <% if @middle_area_selected.present? %>
                         <%= f.collection_select :middle_area_select, @middle_areas, :middle_area_code, :name, { selected: @middle_area_selected}, class: "form-control" %>
                       <% else %>
                         <%= f.collection_select :middle_area_select, @middle_areas, :middle_area_code, :name, { prompt: "選択してください" }, class: "form-control" %>
                       <% end %>
                   </div>
                   
                   <div class="d-flex flex-column form-group">
                     <%= f.label "ジャンル", class: "" %>
                       <% if @genre_selected.present? %>
                         <%= f.collection_select :genre_select, @genres, :genre_code, :name, { selected: @genre_selected }, class: "form-control" %>
                       <% else %>
                         <%= f.collection_select :genre_select, @genres, :genre_code, :name, { prompt: "選択してください" }, class: "form-control" %>
                       <% end %>
                   </div>
                   <div class=" d-flex justify-content-center mt-3">
                     <%= f.submit "検索", class: "btn btn-danger mt-3" %>
                   </div>   
                   <% end %>
                   
                 </div>
                 
                 <div class="col-sm-9">
                   <h4>合計〜件</h4>
                   <div class="row">
                       <div id="searched-restaurants" class="m-2 row">
                           
                       </div>
                   </div>
                 </div>
                   
               </div>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        　　　　　 <button type="button" class="btn btn-primary">Save changes</button>
             </div>
        　　</div>
    　　 </div>

views/posts/new.js.erb

$("#searched_restaurants").html("<%= j(render "restaurants", locals: { restaurants: @restaurants}) %>")

views/posts/_restaurants.html.erb

<% restaurants.each_value do |restaurant| %>
  <div class="card article mb-4 pl-0 col-9">
    <article class="d-flex">
      <figure class="col-4 m-0 p-0">
        <%= image_tag restaurant["photo"], class: "img-fluid" %>
      </figure>
      <div class="article-info col-8 pt-3 d-flex flex-column">
          <div class="food-info">
            <%= link_to "", restaurant["urls"]["pc"] do %>
              <h4 class="title mb-0"><%= restaurant["name"] %></h4>
            <% end %>
            <small class="genre mt-3"><%= restaurant["genre"]["name"] %></small>
            <p class="address mt-2 mb-1 text-nowrap text-truncate"><%= restaurant["address"] %></p>
          </div>
      </div>
    </article>
  </div>
  <div class="col-2 d-flex justify-content-cebter align-items-center mb-4">
    <%= form_with url: "/posts/new", method: "post", local: true do |f| %>
        <%= f.hidden_field :restaurant_id, value: restaurant[:id] %>
      <%= f.submit "選択" %>
    <% end %>
  </div>
<% end %>

試したこと

views/posts/_restaurants.html.erbの1行目を

<% @restaurants.each_value do |restaurant| %>

とするとエラーはなくなるのですが、画面は何も変化しませんでした。

補足情報（FW/ツールのバージョンなど）

Ruby 2.6.5
Ruby on Rails5.2.4.2
bootstrap4.6.0(CDN)
jQuery3(CDN)

Answer 1

render "restaurants", locals: locals を使うときは render partial: "restaurants", locals: です

Comments

[kobatomo-0725]

ご回答ありがとうございます。ご指摘いただいた通り、修正したところエラーはなくなりましたが、まだテンプレートが表示されませんでした。
下記がレンダリング時のログファイルなのですが、正常にレンダリングされていますでしょうか？

```
Started GET "/posts/new?utf8=%E2%9C%93&keyword=&large_area_select=Z014&middle_area_select=&genre_select=G009&commit=%E6%A4%9C%E7%B4%A2" for 119.26.0.136 at 2021-06-18 02:08:21 +0000
Cannot render console from 119.26.0.136! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PostsController#new as JS
Parameters: {"utf8"=>"✓", "keyword"=>"", "large_area_select"=>"Z014", "middle_area_select"=>"", "genre_select"=>"G009", "commit"=>"検索"}
Rendering posts/new.js.erb
Rendered posts/_restaurants.html.erb (1.3ms)
Rendered posts/new.js.erb (4.6ms)
Completed 200 OK in 148ms (Views: 13.1ms | ActiveRecord: 0.0ms)
```

[winterboum]

問題なさげですね。
一件もhitしないときは何も書き出さないことになってるので、そのせいでは？
viewの１行目に <%= restaurants.count %>件ありました
とでも入れてみてください

[kobatomo-0725]

入れてみましたが、表示されず、その上に<p>タグも記述して見たのですがこちらも表示されませんでしたのでレンダリングができていないようです。js.erbファイルがおかしいのでしょうか？

[kobatomo-0725]

js.erbファイルにてセレクタを書き直してみた所、表示されました！
ありがとうございます！