rails から js へのgon を使ったデータの引き渡しがうまくいかない

Question

簡単なタスクのシェアアプリをrails と　javascripts を使って作成しています。
each文を使った繰り返し処理の中に、ボタンを押すと発火して画像の表示・非表示の要素をJSで実装しました。
eachで作成された要素の一つ一つが単独で発火するように.each_with_indexを用いて各要素に番号を割り振りました。
jsでの記述にwhile(i < gon.tasks.length){　のようにgon　を用いたrails と　JSのデータの連携をしようと考えましたが、コントローラーでgon.tasks = @tasks のように定義すると何も表示されないページに偏移し、ウィンドウの左上のロードアイコンがずっと回っている状態になってしまいます。

解決したいこと　上記の画面を解消しraiks から　jsへのデータの連携を行いたい。

★エラー内容
gon を使って　変数をコントローラーに指定。

・gon未使用時　Uncaught TypeError: Cannot read property 'length' of null　
（検証ツール.consoleにて）

・gon使用時　　ページ自体が読み込まれなくなる

app/aseets/javascripts

$(function () {
  var i = 0;
  while(i < gon.tasks.length){
  const index = i;
    $('img_open_'+index).on('click', () => {
    $('img').toggle(hidden);
    });
  }});

app/controllers/taskscontller

class TasksController < ApplicationController
  def index
    @tasks = Task.where(params[:id])　
    gon.tasks = @tasks　　←　この部分が原因？
  end

  def show
    @task = Task.find(params[:id])
  end

  def edit
    @task = Task.find(params[:id]) 
  end

  def update
    @task = Task.find(params[:id])
    @task.update(task_params)
    redirect_to action: 'index'
  end

  def destroy	
    @task = Task.find(params[:id])
    @task.destroy 
    redirect_to action: 'index'
  end
  

  private
def task_params
  params.require(:task).permit( :name, :tasktext)
end

end

app/view/index.html.haml


 .said-content-body
    - @tasks.each_with_index do |task,index| 
      .task-box{:id => "task-box_#{index}"}
        .tasks 
          .task-d-h
            %a{:href  => edit_task_path(task.id)}編集
            %a{"data-method" => "delete", :href => task_path(task.id), :rel => "nofollow"} 削除
          .tasks-name 
            作業名：
            =task.name
          .tasks-text 
            作業内容：
            =task.tasktext
          %button{:id => "img_open_#{index}"} 確認
          %img{:src => "https://t.pimg.jp/035/424/702/1.jpg"}/
          .tasks-day
            =task.created_at.strftime("%Y年%m月%d日 %H時%M分")
          

application.html.haml


!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title tasks
    = stylesheet_link_tag    'application', media: 'all'
    = include_gon(init: true)
    = javascript_include_tag 'application'
    = csrf_meta_tags
    
  %body
    = yield

試したこと
https://whatsupguys.net/programming-school-dive-into-code-learning-37/
↑のページを参考にさせていただき記述を変えました。
gonでの読み込みエラーを中心に検索し
gon clear で解消できるとのことだったので、コントローラに記述を行う
→ページは表示されるが、gon clearで変数がクリアされ
Uncaught TypeError: Cannot read property 'length' of null　の記述がコンソールにて確認できる。
↑　length　の　変数が定義されてませんよと解釈。

手詰まりです。
お知恵を貸していただけると助かります。
よろしくお願いいたします。

---

Rails 5.0.7.2
gem'gon' bundle済み

Comments

[s.k]

開発者ツールにエラーは出てますか？

[s.k]

あ、出てるんですね。

[randm_meet]

ご回答ありがとうございます。
gonを使用してない時には　検証のconsoleにエラーが出ています。
使用すると読み込まれなくなりお手上げ状態です
難しいですね( ；´Д｀)

[s.k]

> ページ自体が読み込まれなくなる
時は何かが無限ループしてるという可能性はありますか。
この時にコンソールにエラーは出てますか？

[randm_meet]

重ね重ね済みません。
読み込まれていない（？）間、検証ツールのコンソールの画面にも何も表示はありません。
白い画面に更新マークがずっとグルグルしている状態です。
コントローラに記載したgon.tasks = @tasks の記載を行うと上記の状態に陥り、クリックなども反応しません。
検証ツールも該当ページにアクセス前に開き、該当ページにアクセスする流れだったので正しいのかわからないです。
無限ループの原因となる記述はJSで使っているwhile文が該当するかと思います。
var i = 0;
while(i < gon.tasks.length){
const index = i;
としているのでgon true がで続けているのでしょうか…

[s.k]

多分、読み込みが無限ループしてるのが原因だとは思います。ちなみに = javascript_include_tag 'application' と = include_gon(init: true) を入れ替えて、= include_gon にするとどうなります？

[randm_meet]

= javascript_include_tag'application'
= include_gon　　　　　　　　　　　→　状態変わらずに更新部分クルクル　白い画面　　　　
----------------------------------------------------------------------------------------------------------------
記述入れ替え
= include_gon　
= javascript_include_tag'application' →　状態変わらずに更新部分クルクル　白い画面　　　
で変わらずです。

何度もご回答いただいているのに申し訳ない…。

[s.k]

このループ処理を外すと動かなくなりますか無限ループなくなりますか？
`while(i < gon.tasks.length){ ~`

[randm_meet]

$(function () {
var i = 0;
while(i < gon.tasks.length){
const index = i;
$('img_open_'+index).on('click', () => {
$('img').toggle(hidden);
});
}});
のwhile部分を↓

$(function () {
$('img_open_'+index).on('click', () => {
$('img').toggle(hidden);
});
}});
に変更（削るだけ）すると通常の画面が表示されます。→無限ループしなくなっている

やはりこの部分でずっとロードし続けている様子です。

[s.k]

そうなんですね。それでは無限ループが原因ですね。
gon.tasks.length は何が表示されますか？
console.log で確認してみてください。

[randm_meet]

console.log(gon.tasks.length);　→　2
console.log(gon.tasks);　↓
Array(2)
0: {id: 65, name: "Aさん　通院", tasktext: "2/17　16時〜", created_at: "2020-03-29T11:36:24.000Z", updated_at: "2020-03-29T11:36:24.000Z", …}
1: {id: 67, name: "通院", tasktext: "cさん
↵", created_at: "2020-03-29T13:15:50.000Z", updated_at: "2020-03-30T01:41:36.000Z", …}
length: 2
__proto__: Array(0)
　との表示でした！

Answer 1

whileの条件は自動的に +1 して増えることはありませんので i++ を書きましょう。

while(i < gon.tasks.length){
  const index = i;
  $('img_open_'+index).on('click', () => {
  $('img').toggle(hidden);
  i++
});

const index = i; はいらないと思います。 i が使えます。

Comments

[randm_meet]

i++を記入することで無事に無限リピートが解消されました！
何度も解決策を探ってくださり、とても助かりました
ありがとうございます！