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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1692閲覧

jquery のプラグインにオプションデータを渡す方法

Yuinyan

総合スコア312

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/10/02 05:37

###前提・実現したいこと

https://github.com/ateliee/jquery.schedule

このプラグインを利用してプログラムを作成したいと考えています。
サンプルのコードでは、timeScheduleとというプラグインに対して、
下記のような形でイニシャルのデータを送信しています。

jQuery(document).ready(function(){ var $sc = jQuery("#schedule").timeSchedule({ startTime: "07:00", // schedule start time(HH:ii) endTime: "21:00", // schedule end time(HH:ii) widthTime:60 * 10, // cell timestamp example 10 minutes timeLineY:60, // height(px) verticalScrollbar:20, // scrollbar (px) timeLineBorder:2, // border(top and bottom) debug:"#debug", // debug string output elements rows : { '1' : { title : 'Title Area', schedule:[ { start:'09:00', end:'12:00', text:'Text Area', data:{ } }, { start:'11:00', end:'14:00', text:'Text Area', data:{ } } ] }, '2' : { title : 'Title Area', schedule:[ { start:'16:00', end:'17:00', text:'Text Area', data:{ } } ] } }, 以下省略

ここで、実際にここに送信するパラメータを、Jsonから取得したデータからループを回して渡したいと考えています。

初心者でよく理解できていないのですが、例えば、下記のようなJsonから、どのようにrowsに当てはめてパラメータを渡すことができるのでしょうか。

実際に、user_name の部分を titleにあてはめ、class_items をscheduleに当てはめたいと考えています。わからない点は、単純にあてはめるのではなく、ループの形で渡すにはどのようにすれば良いか、がわかりません。

var json_items = [ { "user_id": "1" , "user_name": "太郎", "class_items" :[ { "start":"09:00", "end":"10:00", "name" :"理科", "class_room": "4B" }, { "start":"10:00", "end":"11:00", "name" :"英語", "class_room": "EnglishClass" } ] },{ "user_id": "2", "user_name":"二郎", "class_items" :[ { "start":"10:00", "end":"11:00", "name" :"英語", "class_room": "EnglishClass" } ] } ];

上記のデータを適切にrowsに当てはめて、送信したいです。

###サンプルデータのrows

rows : { '1' : { title : "test", schedule:[ { start:'16:00', end:'17:00', text:'Text Area', data:{ } }] }, '2' : { title : "test", schedule:[ { start:'16:00', end:'17:00', text:'Text Area', data:{ } }, { start:'09:00', end:'11:00', text:'Text Area', data:{ } } ] }

宜しくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery3
https://github.com/ateliee/jquery.schedule

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

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

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

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

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

guest

回答1

0

ベストアンサー

要は、取得したデータを「サンプルデータのrows」の形の配列に整形するという要件ですよね?
こんな感じでどうでしょうか。

javascript

1 var rows = []; 2 var detail_info = []; 3 var detail_row = []; 4 $.each(json_items,function(index, row_data) { 5 detail_row["tite"] = "test"; 6 $.each(row_data.class_items,function(row_index, detail) { 7 detail_info[row_index] = {start:detail["start"],end:detail["end"],text:'Text Area',data:{}}; 8 }); 9 detail_row["schedule"] = detail_info; 10 rows[index] = detail_row; 11 }); 12 console.log(rows); 13

キー番が0から始まっているところとかは自身で調整してみてください。

投稿2017/10/02 07:05

m.ts10806

総合スコア80765

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

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

Yuinyan

2017/10/03 06:32

ありがとうございます!試してみます。
m.ts10806

2017/10/03 06:35

ざっとそれっぽくなるように作っただけの状態なので、想定通りの形にならない場合はまた言ってください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問