パーシャルの中で２箇所は個々のデータにして、eachでhtmlを複数作成する方法

Question

質問が抽象的で申し訳ございません。

現在、４７都道府県のそれぞれのローカルメディア情報を表示するためのパーシャルを作成中です。
これeachを使って繰り返しhtmlを作成しようとしているのですが、以下の２箇所を県ごとに変える必要があるため、hashを使って次の②ような変更をしました。

しかし、エラーとなってしまい、やり方がわからず、どなたかお力添えをいただけないでしょうか。
よろしくお願いいたします。

変えたい箇所
id="modal-hokkaidou" →　id = "modal-「県名」
@media_hokkaidou →　@media_「県名」

①元のパーシャル

.html.erb

      <div id="modal-hokkaidou" class="modal js-modal">
        <div class="modal-bg js-modal-close">
        </div>
          <div class="modal-content">
                <table>
                  <tr>
                    <th>サイト名</th>
                    <th>サイト紹介</th>
                  </tr>
                <% @media_hokkaidou.each do |medium| %>
                  <tr>
                    <td><%=link_to medium.site_name , medium.site_url %></td>
                    <td><%=link_to medium.intro , medium.site_url %></td>
                  </tr>
                <% end %>
                </table>
            <a href="#" class="js-modal-close">閉じる</a>
          </div>
        </div>

②考えてみたがエラーとなってしまった方法

.controller
    @modals = ["modal-hokkaidou": "@media_hokkaidou", "modal-aomori": "@media_aomori"...] 

html.erb

     <% @modals.each do |key, value| %>
      <div id="key" class="modal js-modal">
        <div class="modal-bg js-modal-close">
        </div>
          <div class="modal-content">
                <table>
                  <tr>
                    <th>サイト名</th>
                    <th>サイト紹介</th>
                  </tr>
                <% "value".each do |medium| %>
                  <tr>
                    <td><%=link_to medium.site_name , medium.site_url %></td>
                    <td><%=link_to medium.intro , medium.site_url %></td>
                  </tr>
                <% end %>
                </table>
            <a href="#" class="js-modal-close">閉じる</a>
          </div>
        </div>
     <% end %>

ご回答を元に変更したコード

html.erb

     <% @modals.each do |key, value| %>
      <div id="<% key %>" class="modal js-modal">
        <div class="modal-bg js-modal-close">
        </div>
          <div class="modal-content">
                <table>
                  <tr>
                    <th>サイト名</th>
                    <th>サイト紹介</th>
                  </tr>
                <% value.each do |medium| %>
                  <tr>
                    <td><%=link_to medium.site_name , medium.site_url %></td>
                    <td><%=link_to medium.intro , medium.site_url %></td>
                  </tr>
                <% end %>
                </table>
            <a href="#" class="js-modal-close">閉じる</a>
          </div>
        </div>
     <% end %>

controller

    @modals = {"modal-hokkaidou": @media_hokkaidou, "modal-aomori": @media_aomori}
    
    @local_media = LocalMedium.all
    @media_hokkaidou = @local_media.where(prefecture: "北海道")

発生したエラー

Answer 1

単に key と書いても評価されません。

<div id="key" class="modal js-modal">
↓
<div id="<%= key %>" class="modal js-modal">

"でくくると文字列になってしまいます。

<% "value".each do |medium| %>
↓
<% value.each do |medium| %>

ハッシュの定義の方法が変です。

@modals = {"modal-hokkaidou": @media_hokkaidou, "modal-aomori": @media_aomori...}

Comments

[kanou-shimon]

基本的な質問にもお答えいただきありがとうございます。

[kanou-shimon]

大変申し訳ないのですが、お答えいただいた変更を加えたところ、
<% value.each do |medium| %>
の部分で、undefined method `each' for nil:NilClass
となってしまいました。

DBへのアクセスのコードも追記いたしました。

[kanou-shimon]

お手数ですが、ご確認いただければ幸いです。
よろしくお願いいたします。

[neko_daisuki]

@media_hokkaidou　や @media_aomori を定義したあとに @modals　を定義してください。
今は @modals の中の @media_hokkaidou が nil になっていてるのでそのエラーが出てます。

@media_hokkaidou = ...
@media_aomori = ...

@modals = {"modal-hokkaidou": @media_hokkaidou, "modal-aomori": @media_aomori}