Ajaxを使ってデータ保存する際、collection_selectで選択したデータがid番号のままビューに表示されてしまいます。

Question

非同期でフォームから選択すると、画面上に表示されるデータがid番号になってしまい、文字列が表示されません。。。

collection_selectで選択するデータをActiveHashを使い、モデルへ記述しているため、javascriptではidしか取得できていない状態になっています。どのようにしたらcategoryモデルからname:を持って来れるでしょうか。
●●非同期のビュー上にidではなく、肉類、魚介類などと出力したいです●●

記述コード

class Category < ActiveHash::Base
  self.data = [
    { id: 1, name: '--' },
    { id: 2, name: '肉類'},
    { id: 3, name: '魚介類'},
    { id: 4, name: '乳製品類'},
    { id: 5, name: '卵類'},
  ]
  include ActiveHash::Associations 
  has_many :articles
end

    <%= form_with model: [@refrige, @food], url: refrige_foods_path, method: :post,id: "form" do |f|%>
        <%#エラーメッセージを表示させる記述が必要 Ajaxなのでアラートでエラーメッセージ表示%>
    <table class="form-table">
      <thead>
        <tr>
          <th>食材名 (必須)</th>
          <th>商品名　</th>
          <th>カテゴリー (必須)</th>
          <th>購入日(必須)</th>
          <th>賞味期限(必須)</th>
          <th>購入店　</th>
        </tr>
      </thead>
      <tbody class="bulk-registration-field">
          <tr class="item" data-id=<%= @refrige.id%> id=new_food  data-check=<%= @food.checked %>>
            <td>
              <%= f.text_field :food_name, id: "food_name", class: 'form-control'%>
            </td>
            <td>
              <%= f.text_field :product_name, id: "product_name", class: 'form-control'%>
            </td>
            <td>
              <%= f.collection_select(:category_id, Category.all, :id, :name, {}, {class:'form-control', id:"category_id"}) %>
            </td>
            <td>
              <%= f.date_field  :purchase_date, id: "purchase_date", class: 'form-control'%>
            </td>
            <td>
              <%= f.date_field :sell_by, id: "sell_by", class: 'form-control' %>
            </td>
            <td>
              <%= f.text_field :shop, id: "shop", class: 'form-control'%>
            </td>
          </tr>
      </tbody>
    </table>
    </div>
    <div class="text-center">
      <%# <%= form.submit '食材をまとめて追加', class: 'btn-btn-primary' %>
      <%= f.submit '食材を追加', class: 'btn-btn-primary',id: "food_submit" %>
    </div>
  <% end %>
    <div class="java_food">
      <div id="list">
      </div>
    </div>

function food() {
  const submit = document.getElementById("food_submit");
  const newFood = document.getElementById("new_food");

    submit.addEventListener("click", (e) => {
    const refrigeId = newFood.getAttribute("data-id")
    const formData = new FormData(document.getElementById("form"));// メモ投稿のフォームに入力された情報をidで取得
    const XHR = new XMLHttpRequest();
    XHR.open("POST", `/refriges/${refrigeId}/foods `, true);
    XHR.responseType = "json";
    XHR.send(formData);


    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.food;
      const list = document.getElementById("list");
      const nameText = document.getElementById("food_name");
      const productText = document.getElementById("product_name")
      const categoryText = document.getElementById("category_id")
      const purchaseText = document.getElementById("purchase_date")
      const sellText = document.getElementById("sell_by")
      const shopText = document.getElementById("shop")
        // もしitemが存在しない場合→
        if (item.id == null) {
          alert(`食材名・カテゴリー・購入日・賞味期限 の記入をしてください`);
          return null;
          }else{
          // ↓もしitemが存在する場合
          const HTML = `

          <table class="food_table">
            <tr class="item">
               <td class="food_name">
                 ${item.food_name}
               </td>
               <td class="product_name">
                 ${item.product_name}
               </td>
               <td class="category_id">
                 ${item.category_id}
               </td>
               <td class="purchase_date">
                 ${item.purchase_date}
               </td>
               <td class="sell_by">
                 ${item.sell_by}
               </td>
               <td class="shop">
                 ${item.shop}
              </td>
             </tr>
          </table>`;
           list.insertAdjacentHTML("afterend", HTML);
           nameText.value = "";
           productText.value = "";
           shopText.value = "";
           purchaseText.value = null;
           sellText.value = null;
           categoryText.value = "1";
        };
    }
   e.preventDefault();
   // 標準設定されている（Default）イベントを阻止する（prevent）メソッド二重で処理が重ならないよう。リロードした時にcreateアクションのみしてもらうようにする。
  });
}
window.addEventListener("load", food);

def create
    food = Food.new(food_params)
    food.save if food.valid? 
    render json: { food: food }
  end

private

  def food_params
    params.require(:food).permit(:food_name, :product_name, :category_id, :purchase_date, :sell_by, :shop).merge(refrige_id: params[:refrige_id], checked: false)
  end 

試したこと

jsファイルに${item.category.name}にしてみましたが、やはりダメでした。。。
create の時点でidしか持ってこれていません。

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

初心者です、わかりにくければ追記いたします。どなた分かりますでしょうか？
どうぞよろしくお願いします????‍♀️

Answer 1

解決できました！
js上にデーターがないということは、サーバーサイドの状態でidだけではなく、 '肉類'という値も取得してからjs側にデータを渡さなければいけませんでした。

def create
food = Food.new(food_params)
if food.valid?
category = Category.find(food.category_id)
food.save
end
render json: { food: food, category: category }
end

コントローラーに以上の記述をし、カテゴリーの情報を取得してからjs側に送る事で解決しました。

const category = XHR.response.category;
const HTML =
<div class="category_id_js">
<a>${category.attributes.name}</a>
</div>;
food.js側には上記を追記。