apiで取得した情報をrails-fullcalendarで表示したい。

前提・実現したいこと

以前も質問させて頂いたのですがどうしても解決できない為質問させて頂きます。

開発中の予約サイトの予約情報を別のカレンダーアプリに表示したいです。
apiを使い取得したjsonデータをカレンダーに追加している最中なのですが、配列で取得したjsonデータをカレンダーに反映させる事ができません。

1,railsのcontroller内にてcurlコマンドを使い予約サイトのデータを取得。
2,gem'gon'を使いcontrollerで定義した変数を<script>タグ内で使用可能にする。(rubyの変数をjsで使えるようにする)
３、取得したデータをforEachで繰り返し処理し、欲しいデータ引き出す。
４、events: に引き出したデータを書き込む。

お忙しい中申し訳ありませんがアドバイスご指摘頂けないでしょうか、、

該当のソースコード

ruby
1controller
2
3def index
4    uri = `curl -v -X GET "予約サイトのurl" \
5          -H "Authorization: Bearer XXXX"`
6    gon.events = JSON.parse(uri)["tasks"]
7end
8

取得した予約情報

{"status":"200","message":"Loaded Tasks",
  "tasks":[
    {"id":51,"request":"よろしく","start_at":1593658800,"end_at":1593662400,
      "task_course":{"title":"中川のコース","description":null,"course_time":60,"charge":"10000"},
      "store_member":{"name":"武田","phone":"09087654321","address":null}
    },
    {"id":61,"request":"よろ","start_at":1593743400,"end_at":1593747000,
      "task_course":{"title":"中川のコース","description":null,"course_time":60,"charge":"10000"},
      "store_member":{"name":"武田","phone":"09087654321","address":null}
    },
    {"id":71,"request":"お手柔らかに","start_at":1593831600,"end_at":1593835200,
      "task_course":{"title":"中川のコース","description":null,"course_time":60,"charge":"10000"},
      "store_member":{"name":"武田","phone":"09087654321","address":null}
    }
  ]
}

index.html.erb



<div id="calendar"></div>

<script>
              ↓controller内で取得した変数
Object.keys(gon.events).forEach(function (key) {
  
  var id = (gon.events[key]["id"])
  var request = (gon.events[key]["request"])
  var start = (moment.unix(gon.events[key]["start_at"]).format());
  var end = (moment.unix(gon.events[key]["end_at"]).format());
  var title = (gon.events[key]["task_course"]["title"])
  var course_time = (gon.events[key]["task_course"]["course_time"])
  var charge = (gon.events[key]["task_course"]["charge"])
  var name = (gon.events[key]["store_member"]["name"])
  var phone = (gon.events[key]["store_member"]["phone"])
  var address = (gon.events[key]["store_member"]["address"])
  
  var data = [
    {"title": title}, 
    {"start": start}, 
    {"end": end}
  ]
  
  $('#calendar').fullCalendar({
        // ヘッダーのタイトルとボタン
        header: {
            // title, prev, next, prevYear, nextYear, today
            left: 'prev,next today',
            center: 'title',
            right: 'month agendaWeek agendaDay'
        },
        events: data,  //ここにカレンダーに表記したいデータをかく。
  });
});


</script>

試したこと


このような形式で記載するとカレンダーに予定が表示されるのですが、配列が入った変数などの書き込み方が分かりません汗

events: [
              {
                 　title: 'event1',
                   start: '2013-01-01'
              },
              {
                   title: 'event2',
                   start: '2013-01-02',
                   end: '2013-01-03'
              },
              {
                   title: 'event3',
                   start: '2013-01-05 12:30:00',
                   allDay: false // will make the time show
              }
        ]