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

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

ただいまの
回答率

90.98%

  • JavaScript

    13882questions

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

  • jQuery

    5835questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 416

Yuinyan

score 222

前提・実現したいこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

          var rows = [];
          var detail_info = [];
          var detail_row = [];
          $.each(json_items,function(index, row_data) {
              detail_row["tite"] = "test";
              $.each(row_data.class_items,function(row_index, detail) {
                  detail_info[row_index] = {start:detail["start"],end:detail["end"],text:'Text Area',data:{}};
              });
              detail_row["schedule"] = detail_info;
              rows[index] = detail_row;
          });
        console.log(rows);

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/03 15:32

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

    キャンセル

  • 2017/10/03 15:35

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

    キャンセル

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

  • ただいまの回答率 90.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    PHPとajaxによる検索について

    検索機能の作り方で困ったので質問させていただきます。 現在、PHPとMySQLとajaxで検索機能を作っています。 仕様としましては、リアルタイムに検索結果を出したかっ

  • 解決済

    phpの実行の順番を変えたい

    phpの処理の順番を変更したいです。 <body> 内でインサートしたものを<header>内で取り出したいです。 どのようにすれば実現できるでしょうか? php、もしくはj

  • 解決済

    PHPとJavaScript間の連携について

    前提・実現したいこと PHPを使って業務画面を作成しています。 プルダウンから選択した内容でデータの絞り込みを行い、 絞り込まれた候補をセレクトボックスに一覧表示したいです。

  • 解決済

    jQuery ID属性取得がうまくいかない

    下記コードの$('input[name = bbs]').on('click',function()から処理で、bbsをclickした時に変数myidでradioのidを取得、変数

  • 受付中

    複数のドロップダウンリストについて

    前提・実現したいこと PHPとJQUERYで多段階のドロップダウンリストを実装しようとしておりますが、不明点があり、実現できておりません。 発生している問題・エラーメッセー

  • 解決済

    jq.schedule.jsを使ったタイムテーブルの初期値について

    プログラミング初心者です。 jq.schedule.jsで6:00から29:00のタイムテーブルを作っています。 下記4点やりたいことですが、どこをどう書き換えるべきな

  • 解決済

    jQueryのtablesorterでソートしない固定列をつくりたい。

    php・jQuery・SQLを勉強し始めて3ヶ月の初心者です。 phpとjQueryを使用してDBのデータをajaxを利用してテーブルに表示させるプログラムを作成しています。

  • 解決済

    フォームの値の比較を簡潔に記載したい。

    前提・実現したいこと jqueryで下記のソースをまとめて書く方法はないでしょうか? 該当のソースコード <input type="text" name="hoge1" 

同じタグがついた質問を見る

  • JavaScript

    13882questions

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

  • jQuery

    5835questions

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