解決したいこと

編集画面でそれぞれの入力欄にDBの情報の値が元からセットされている状態にしたい。

##現状
現在、フリマアプリを作成しております。出品完了後、編集する際に元々の値をセットさせておきたいのですが、画像(プレビュー画像も)とカテゴリの親子孫の値だけ入っていません。
元々値をセットしておくにはどのような処理を行えば良いでしょうか？

補足情報

rails 5.2.3
mysql

##記述コード
products_controller.rb

(省略)
def new
    @product = Product.new
    @product.product_photos.build

    @category_parent_array = Category.where(ancestry: nil).pluck(:name)
    @category_parent_array.unshift("---")
  end

  def create
    product = Product.new(product_params)
    if product.save!
      redirect_to root_path
    else
      @category_parent_array = Category.where(ancestry: nil).pluck(:name)
      @category_parent_array.unshift("---")      
      
      render :new
    end
  end

  def edit
    @product = Product.new
    @product.product_photos.build
    @products = Product.find(params[:id])
  end

  def update

  end

  def destroy
    @product.destroy
    redirect_to root_path
  end

  def get_category_children
    @category_children = Category.find_by(name: "#{params[:parent_name]}", ancestry: nil).children
  end

  def get_category_grandchildren
    @category_grandchildren = Category.find("#{params[:child_id]}").children
  end

  
  private
  def product_params
    params.require(:product).permit( :name, :explanation, :category_id, :status, :bear, :brand, :days, :price, product_photos_attributes: [:photo, :_destroy, :id]).merge(exhibitor_user_id: current_user.id)
  end
end

edit.html.haml

(省略)
= form_with model: @product, local: true do |form|
        .new_page_main__photo
          %span.label_title 
            出品画像
          %span.required 必須
          %p.upload_limit 最大10枚までアップロードできます
          %div
            .file__box
              #image-box
                #previews
                  - if @product.persisted?
                    - @product.photos.each_with_index do |photo, i|
                      = image_tag product.photo.url, data: { index: i }, width: "100", height: '100'
                = form.fields_for :product_photos do |image|
                  .js-file_group{"data-index" => image.index}
                    = image.file_field :photo, class: 'js-file'
                    %br
                    %span.js-remove 削除
                  - if @product.persisted?
                    = image.check_box :_destroy, data:{ index: image.index }, class: 'hidden-destroy'
                - if @product.persisted?
                  .js-file_group{"data-index" => @product.photos.count}
                    = file_field_tag :photo, name: "product[images_attributes][#{@product.photos.count}][photo]", class: 'js-file'
                    .js-remove 削除
(省略)
 　　　　.new_page_main__category
          %span.label_title
            カテゴリー
          %span.required 必須
          %p
            = form.select :category_id, @category_parent_array, {}, {class: 'listing-select-wrapper__box--select', id: 'parent_category', :selected => @products.category_id.to_s}
(省略)

product_category.js(カテゴリの親子孫の動的セレクトボックス)


$(function(){
  function appendOption(category){
    var html = `<option value="${category.id}" data-category="${category.id}">${category.name}</option>`;
    return html;
  }
  function appendChidrenBox(insertHTML){
    var childSelectHtml = '';
    childSelectHtml = `<div class='listing-select-wrapper__added' id= 'children_wrapper'>
                        <div class='listing-select-wrapper__box'>
                          <select class="listing-select-wrapper__box--select" id="child_category" name="product[category_id]">
                            <option value="---" data-category="---">---</option>
                            ${insertHTML}
                          <select>
                        </div>
                      </div>`;
    $('.new_page_main__category').append(childSelectHtml);
  }
  function appendGrandchidrenBox(insertHTML){
    var grandchildSelectHtml = '';
    grandchildSelectHtml = `<div class='listing-select-wrapper__added' id= 'grandchildren_wrapper'>
                              <div class='listing-select-wrapper__box'>
                                <select class="listing-select-wrapper__box--select" id="grandchild_category" name="product[category_id]">
                                  <option value="---" data-category="---">---</option>
                                  ${insertHTML}
                                </select>
                              </div>
                            </div>`;
    $('.new_page_main__category').append(grandchildSelectHtml);
  }

  $('#parent_category').on('change', function(){
    var parentCategory = document.getElementById('parent_category').value;
    if (parentCategory != "---"){ 
      $.ajax({
        url: 'get_category_children',
        type: 'GET',
        data: { parent_name: parentCategory },
        dataType: 'json'
      })
      .done(function(children){
        $('#children_wrapper').remove();
        $('#grandchildren_wrapper').remove();
        $('#size_wrapper').remove();
        $('#brand_wrapper').remove();
        var insertHTML = '';
        children.forEach(function(child){
          insertHTML += appendOption(child);
        });
        appendChidrenBox(insertHTML);
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#children_wrapper').remove();
      $('#grandchildren_wrapper').remove();
      $('#size_wrapper').remove();
      $('#brand_wrapper').remove();
    }
  });
  $(document).on('change', '#child_category', function(){
    var childId = $('#child_category option:selected').data('category');
    if (childId != "---"){
      $.ajax({
        url: '/products/get_category_grandchildren',
        type: 'GET',
        data: { child_id: childId },
        dataType: 'json'
      })
      .done(function(grandchildren){
        if (grandchildren.length != 0) {
          $('#grandchildren_wrapper').remove();
          $('#size_wrapper').remove();
          $('#brand_wrapper').remove();
          var insertHTML = '';
          grandchildren.forEach(function(grandchild){
            insertHTML += appendOption(grandchild);
          });
          appendGrandchidrenBox(insertHTML);
        }
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#grandchildren_wrapper').remove();
      $('#size_wrapper').remove();
      $('#brand_wrapper').remove();
    }
  });
});

product_new.js(画像のプレビュー)


$(function(){
  $(document).on('turbolinks:load', ()=> {
    const buildFileField = (num)=> {
      if (num < 10) {
      const html = `<div data-index="${num}" class="js-file_group">  
                      <input class="js-file" type="file"
                      name="product[product_photos_attributes][${num}][photo]"
                      id="product_images_attributes_${num}_src"><br>
                      <div class="js-remove">削除</div>
                    </div>`;
      return html;} else {
        return false;
      }
    }
    const buildImg = (index, url)=> {
      const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
      return html;
    }
  
    let fileIndex = [1,2,3,4,5,6,7,8,9,10];
    lastIndex = $('.js-file_group:last').data('index');
    fileIndex.splice(0, lastIndex);
  
    $('.hidden-destroy').hide();
  
    $('#image-box').on('change', '.js-file', function(e) {
      const targetIndex = $(this).parent().data('index');
      const file = e.target.files[0];
      const blobUrl = window.URL.createObjectURL(file);
  
      if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
        img.setAttribute('src', blobUrl);
      } else {
        $('#previews').append(buildImg(targetIndex, blobUrl));
        $('#image-box').append(buildFileField(fileIndex[0]));
        fileIndex.shift();
        fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
      }
    });
  
    $('#image-box').on('click', '.js-remove', function() {
      const targetIndex = $(this).parent().data('index');
      const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`);
      if (hiddenCheck) hiddenCheck.prop('checked', true);
  
      $(this).parent().remove();
      $(`img[data-index="${targetIndex}"]`).remove();
  
      if ($('.js-file').length == 0) $('#image-box').append(buildFileField(fileIndex[0]));
    });
  });
});