質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

0回答

679閲覧

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

jyon3030

総合スコア11

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

1グッド

0クリップ

投稿2020/07/02 14:28

前提・実現したいこと

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

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

1,railsのcontroller内にてcurlコマンドを使い予約サイトのデータを取得。
2,gem'gon'を使いcontrollerで定義した変数を<script>タグ内で使用可能にする。(rubyの変数をjsで使えるようにする)
3、取得したデータをforEachで繰り返し処理し、欲しいデータ引き出す。
4、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 } ]
simasima👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問