javascript: サーバー側から返ってきたデーターの加工について

Question

前提
予約カレンダーっぽいものをjasvascriptで描画しています。
コード

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

  window.onload = function() {
      {
        const
          day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
          day_jname = ['(日)', '(月)', '(火)', '(水)', '(木)', '(金)', '(土)'],
          doc = document,
          DEF_OPTION = { };

        const
          A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
          B = (d, n) => d.setDate (d.getDate () + n),
          C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
          D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'),
          E = (e, d) => {
            let
              [a,,b] = A (e, 'label', 'br', 'label'),
              w = d.getDay () ;
            a.textContent = d.getDate ();
            b.textContent = day_jname[w];
            e.classList.add (day_name[w]);
          },
          F = d => {
            let m = d.getMonth ();
            return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
            (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
          },
          H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
          I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':');

        //_____________


        class Schedule {

          constructor (date = new Date, range = 7, plan = [ ], option = DEF_OPTION) {
            this.current = H (date);//表の左端の日付、これを基準とする
            this.date    = H (date);
            this.range   = range;  //何日分を表示するか
            this.plan    = plan; //予定表が構成される
            this.table   = document.createElement ('table');
            this.option  = Object.assign ({ }, option);

            this.remake ();
          }


          add (day = this.range) {
            let d = H (this.current);
            d.setDate (d.getDate () + day);
            if (+this.date <= +d)
              this.current = d;
            return this;
          }

          //Booking
          setBook (date, occupancyTime) {// 予約日時,占有時間(分)
            let
              current = new Date (date),
              dayNo = F (current),
              sTime = 30,//30間隔
              step = new Date (Date.UTC (1970,0,1, 0, sTime)),
              cnt = Math.floor (occupancyTime / sTime);

            for (let i = 0; i < cnt; i++) {
              let time = D (current);
              if (! this.plan[time])
                this.plan[time] = [ ];
              this.plan[time][dayNo] = true;
              current.setTime (+current +(+step));
            }
            return this;
          }

      remake () {
        let t = this.table;
        t.innerText = '';

        let
          h = t.createTHead (),
          tr0 = h.insertRow (-1),
          tr1 = h.insertRow (-1),
          d = H (this.current),
          s = tr0.insertCell (-1),
          c = 1,
          m = d.getMonth ();

        for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
          let td = tr1.insertCell (-1);
          if (m !== d.getMonth ()) {
            s.colSpan = c - 1;
            s = tr0.insertCell (-1);
            m = d.getMonth ();
            c = 1;
          }
          s.textContent = C (d);
          E (td, d);
        }
        s.colSpan = c - 1;

        let e = tr0.insertCell (0);
        e.textContent = '前の一週間';
        e.classList.add ('button');
        e.rowSpan = 2;
        this.prev_btn = e;

        e = tr0.insertCell (-1);
        e.textContent = '次の一週間';
        e.classList.add ('button');
        e.rowSpan = 2;
        this.next_btn = e;

        //__
        let
          begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間
          end   = new Date (Date.UTC (1970,0,1,15, 30)),//列の終了時間
          step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の間隔調整時間
          o = F (this.current),
          [tb] = A (t, 'tbody');

        for (let d = begin; d < end; d = new Date (+step + (+d))) {
          let
            b = I (d),
            c = this.plan[b] || [],
            tr = tb.insertRow (-1);

          tr.insertCell (-1).textContent = b;
          for (let i = 0; i < this.range; i++) {
            let td = tr.insertCell (-1);
            if (c[o + i]) {
              td.textContent = '-';
              td.classList.add ('invalid');
            }
            else {
              td.textContent = '◎';
              td.classList.add ('valid');
            }
          }
          tr.insertCell (-1).textContent = b;
        }

        return this;
      }


          handleEvent (event) {
            let t = event.target;
            if (t === this.prev_btn) this.add (-this.range).remake ();
            if (t === this.next_btn) this.add ( this.range).remake ();

            let cbfunc = this.option.handleEvent;
            if ('function' === typeof cbfunc)
              cbfunc.call (this, event);
          }


          static convert (ary) {
            let rst = { };
            ary.forEach (a => {
              let
                dt = new Date (a + ':00.000+09:00'),
                tm = D (dt),
                dn = F (dt);
              if (! rst[tm])
                rst[tm] = [];
              rst[tm][dn] = true;
            });
            return rst;
          }
          //追記
          static getDayPlan (obj, dt) {
            let idx = [ ];
            let dn = F (dt);
            for (let i = 0; i < 24; i+= 1) {
              let h = ('0' + i).slice (-2);
              idx.push (h + ':00');
              idx.push (h + ':30');
            }
            console.log(obj.plan);
            return idx.map (i => [i, !!obj.plan[i][dn]]);
          }
        }

        this.Schedule = Schedule;
      }

      //_____________
      function strDateJp (date) {
        let [y, m, d] = ['getFullYear', 'getMonth', 'getDate'].map (fc => date[fc]());
        return `${y}年${m+1}月${d}日`;
      }

      function daysCount(key){
        return 14;
      }

      const
        BUSY = ['2019-09-26T14:30', '2019-09-25T09:30'],
        plan = Schedule.convert (BUSY),
        schedule = new Schedule (new Date, daysCount(), plan),
        table = schedule.table;

      table.border = 1;

      //予約入った時 例) 9月27日 9時30 2時間コースと予約が入った時
      schedule.setBook (new Date (2019, 8, 27, 9, 30), 120).remake ();
      //サーバー側から返ってくるデータ
      //下記の二次元配列を上記にいい感じに納めたい。
      [['2019-09-26T14:30', 60], ['2019-09-27T09:30', 60], ['2019-09-28T14:30', 30]]

      //schedule.remake (); //単独で表を更新
      document.querySelector ('#calendar').appendChild (table)

  }

#実現したいこと
該当箇所

//予約入った時 例) 9月27日 9時30 2時間コースと予約が入った時
schedule.setBook (new Date (2019, 8, 27, 9, 30), 120).remake ();
//サーバー側から返ってくるデータ
//下記の二次元配列を上記にいい感じに納めたい。
[['2019-09-26T14:30', 60], ['2019-09-27T09:30', 60], ['2019-09-28T14:30', 30]]

サーバーから上記のような二次元配列を返しています。
上記の二次元配列をfor文で回して要素数の分だけschedule.setBookを生成したい。

イメージ

date = [['2019-09-26T13:30', 120], ['2019-09-27T09:30', 60], ['2019-09-28T14:30', 30]]
//処理上、月だけ 当月(9月) - 1 = 当月(9月)をする必要がある。
schedule.setBook (new Date (2019, 8, 26, 13, 30), 120).remake ();
schedule.setBook (new Date (2019, 8, 27, 09, 30), 60).remake ();
schedule.setBook (new Date (2019, 8, 28, 14, 30), 30).remake ();

#困っていること
サーバーから返ってくるデータをschdule.setBookいい感じに収めることができずにいます。

for (let i=1;i<date.count;i++){
//sliceメソッドを使って無理くりデータの中身をschdule.setBookに詰めることは出来るのですが、書き方があまり綺麗じゃないので皆さんからご教示頂きたいです。
} 

#試したこと

      date = [['2019-09-26T13:30', 120], ['2019-09-27T09:30', 60], ['2019-09-28T14:30', 30]]
      date.forEach((value) => {
        schedule.setBook (value).remake ();
      });

foreachで配列を回して、schedule.setBookに値を入れてみましたが、カレンダーに反映されませんでした。

Answer 1

文字列をそのままDateに突っ込んじゃダメなのでしょうか？

date = [['2019-09-26T13:30', 120], ['2019-09-27T09:30', 60], ['2019-09-28T14:30', 30]]
date.forEach(x=>console.log([new Date(x[0]),x[1]]));

Comments

[nanase21]

ご教示頂きありがとうございます。
解決しました。

Answer 2

date = [['2019-09-26T13:30', 120], ['2019-09-27T09:30', 60], ['2019-09-28T14:30', 60]]
date.forEach(x=> schedule.setBook (new Date(x[0]),x[1]).remake ());

@yambejpさんからご教示いただいたコードを参考に上記のコードで解決しました。