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

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

ただいまの
回答率

87.49%

javascriptでhtmlのvalueを配列として取得する方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,095

score 123

前提・実現したいこと

mysqlのデータをjsに反映させる方法を知りたいです。
データの中身

  1. 2019-03-26-15:00 60分コース
  2. 2019-03-10-09:00 90分コース
  3. 2019-03-03-09:00 30分コース
  4. 2019-02-26-11:00 120分コース
  5. 2019-02-26-15:00 150分コース
  6. 2019-03-03-15:00 180分コース
  7. 2019-03-02-11:00 210分コース
  8. 2019-03-02-09:00 120分コース
  9. 2019-03-08-10:30 60分コース

発生している問題・エラーメッセージ

htmlのvalueをjsを取得して下記のコードでmysqlのデータを反映させているのですが、先頭のデータしか反映させることが出来ずにいます。
恐らく、配列?にしてデータを取得する必要があるのかなと思うのですが、その方法が分からないです。

#erb
<input type="hidden" name="sample" value="<%= booking.start_date.strftime("%Y-%m-%d-%H:%M") %>", id='sample',class='sample_class' readonly>
//sampleはhtmlのinputのIDです。

shedule.setBook (new Date (year, month - 1, day, hour, minutes), course).remake ();

該当のソースコード

window.onload = function() {
    {
      const
        day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
        day_jname = ['(Sun.)', '(Mon.)', '(Tue.)', '(Wed.)', '(Thu.)', '(Fri.)', '(Sat.)'],
        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 Shedule {

        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;
        }


        setHoliday (...dayNo) {
          let
            year   = this.current.getFullYear (),
            start  = new Date (year, 0, 1),
            end    = new Date (year, 12, 1),

            b = new Date (Date.UTC (1970,0,1, 0, 0)),//列のスタート時間
            e = new Date (Date.UTC (1970,0,1,24, 30)),//列の終了時間
            s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間

          dayNo.forEach (n => {
            let current = new Date (start);

            current.setDate (7 - current.getDate () + n);

            for (; current < end; current.setDate (current.getDate () + 7)) {
              let idx = F (current);

              for (let c = b; c < e; c = new Date (+s + (+c))) {
                let key = I (c);
                if (! this.plan[key])
                  this.plan[key] = [ ];
                this.plan[key][idx] = true;
              }
            }
          });

          return this;
        }



            setLunchTime (...dayNo) {
          let
            year   = this.current.getFullYear (),
            start  = new Date (year, 0, 1),
            end    = new Date (year, 12, 1),

            b = new Date (Date.UTC (1970,0,1, 12, 0)),//列のスタート時間
            e = new Date (Date.UTC (1970,0,1,13, 30)),//列の終了時間
            s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間

          dayNo.forEach (n => {
            let current = new Date (start);
            current.setDate (7 - current.getDate () + n);

            for (; current < end; current.setDate (current.getDate () + 7)) {
              let idx = F (current);

              for (let c = b; c < e; c = new Date (+s + (+c))) {
                let key = I (c);
                if (! this.plan[key])
                  this.plan[key] = [ ];
                this.plan[key][idx] = true;
              }
            }
          });

          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 () {
          this.prev_btn = this.next_btn = null;
          let t = this.table;
          [...t.childNodes].forEach (e => e.remove ());

          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,17, 30)),//列の終了時間
            step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
            o = F (this.current),
            rst = [ ];

          for (let d = begin; d < end; d = new Date (+step + (+d))) {
            let
              a = new Array (this.rangi),
              b = I (d),
              c = this.plan[b] || [];

            for (let i = 0; i < this.range; i++)
              a[i] = c[o + i] ? '-' : '◎';

            rst.push ([b, ...a, b]);
          }

         let [tb] = A (t, 'tbody');
         rst.forEach (r => {
           let tr = tb.insertRow (-1);
           r.forEach (c => tr.insertCell (-1).textContent = c)
         });

         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;
        }

      }

      this.Shedule = Shedule;
    }

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


    //___________________________

    const
      BUSY = ['2019-02-19T14:30', '2019-02-21T14:30'],
      plan = Shedule.convert (BUSY),
      shedule = new Shedule (new Date, 7, plan),
      table = shedule.table;

    table.border = 1;
    //月水金を休日      昼休みがあるのが日火木土
    //shedule.setHoliday (1, 3, 5).setLunchTime (0, 2, 4, 6)//..remake ();

    //start--時間の時と分の分割処理
      var name_start = document.getElementById('sample').value;

      console.log(name_start);
      var year = name_start.substr( 0, 4 ); 
      var month = name_start.substr( 5, 2 );
      var day = name_start.substr( 8, 2 );
      var hour = name_start.substr( 11, 2 );
      var minutes = name_start.substr( 14, 2 );
      var course = name_start.substr( 17, 4 );

      console.log(year);
      console.log(month);
      console.log(day);
      console.log(hour);
      console.log(minutes);

    //mysqlのデータ
    shedule.setBook (new Date (year, month - 1, day, hour, minutes), course).remake ();
  //予約入った時 例) 2月24日 9時30 2時間コースと予約が入った時
    shedule.setBook (new Date (year, 1, 24, 9, 30), 120).remake ();

    //shedule.remake (); //単独で表を更新
    document
      .querySelector ('#calendar')
      .appendChild (table)
      .addEventListener ('click', shedule, false);

試したこと

valueを取得する時に配列で取得したかったのですが取得方法がわかりませんでした。また、htmのvalueを取得したコードを見ていただけると分かると思いますがjavascriptを勉強し始めたばかりのため冗長なコードになっています。

補足情報(FW/ツールのバージョンなど)

javascript

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+1

Ajaxで読み込めばいいものを。

納期とかないのですか?
時間がかかっているようですが大丈夫?

<textarea id="sample" style="display:none">
2019-03-26-15:00 60分コース
2019-03-10-09:00 90分コース
2019-03-03-09:00 30分コース
2019-02-26-11:00 120分コース
2019-02-26-15:00 150分コース
2019-03-03-15:00 180分コース
2019-03-02-11:00 210分コース
2019-03-02-09:00 120分コース
2019-03-08-10:30 60分コース
</textarea>

<script>
console.log(
  document.getElementById('sample')
  .value.trim()
  .split(/\n|\r|\r|n/)
  .map (a=>a.match(/(\d+)/g).map(a=>parseInt(a,10)))
  .map (([y,m,d,h,mn,c])=>[new Date(y,m-1,d,h,mn), c])
);
</script>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/02 22:51

    私自身、プログラミングを勉強し始めた初学者ですので、これは勉強の一環で作っているものでして、特に納期というのは無いです。心配して頂いて申し訳ございません。
    今Ajaxについて調べさせていただきました。Ajaxにの使い方についてまだ触れたことがないので勉強してます。
    ちなみになんですが、@hai_haiさんはjsを勉強する時どのようにしているのでしょうか?基本的な文法の書き方については分かるようになってきたのですが、ご教示頂いたカレンダーのようなコードを空で書けと言われたら書ける自信がないです...

    キャンセル

  • 2019/03/02 23:08

    勉強!?
    書籍か、写経か、ネットか、御師匠様か?
    ここ以外で質問してみれば?

    関係のないことだけれど
    先だって、ここのご意見番どもに「守破離」という言葉をいただいた。
    もっともだな、と凄く感銘した。

    キャンセル

  • 2019/03/03 20:50

    稚拙な質問してしまし申し訳ございませんでした。
    書籍の方を購入し、勉強してみます。
    ご教示いただきありがとうございました。

    キャンセル

  • 2019/03/21 19:21

    @hai_haiさん
    以前、カレンダーの実装について質問させて頂いたnanaseと申します。
    カレンダーについてまたご質問をさせていただきたい事があるのですが、ご教示頂けないでしょうか?
    私なりに頑張ってみたのですが、実力不足のため思うようにいかず困っています。
    何度もご質問してしまい、ご迷惑をおかけしてしまい申し訳御座いませんがご教示いただけると幸いです。

    キャンセル

+1

MySQLはWebサーバ側に存在するデータベースです。
ブラウザはWebサーバへHTTPリクエストを投げてHTMLファイルをダウンロードした後に解析、
その中に<script>タグを見つけたらその中身をJavaScriptのコードとして実行するという流れになります。

なのでJavaScriptにMySQLを操る権限はありません。
JavaScriptに出来るのはダウンロードしたHTMLファイルに書かれている内容を元に実行することだけです。

mysqlのデータをjsに反映させる方法を知りたいです。

ふむふむ、上記の理由で日本語でおkみたいな事になっていますが概ね把握しました。
ソースコード指定の「Ruby #erb」という記述がありますね。
つまり、Ruby(多分Railsかな?)がWebサーバとして可動しており、HTTPリクエストが来たらHTMLファイルを動的に生成して投げ返しているのでしょう。

そうであれば、JSに反映させる為には、MySQLのデータをHTMLファイル上に書き出して、
JavaScriptにJavaScriptコードとして読み込んでもらうという形で実現可能です。

まずはerbの学習を進めましょう。

htmlのvalueをjsを取得して下記のコードでmysqlのデータを反映させているのです

お前また言ってる事が変わってるじゃねーか!!
上記言ってる内容は「MySQL→HTML」、今回の言ってる内容は「HTML→MySQL」
つまり、「読み」「書き」両方したいと言ってるわけですね。

ブラウザはformタグがあればWebサーバに対してHTTPリクエストを飛ばす事が出来ます。
その時formタグ内にinput要素があればそれをPOSTやGET等のパラメータとして付与できます。
詳しくはHTMLのformやinputに関して学習してください。

HTTPリクエストを受け取ったWebサーバ、
Rubyでパラメータ情報を吸い上げてMySQLへ反映するためのコードを書きましょう。
恐らくRailsでしょうけど書いてありませんので、そのまま学習を進めるなどしてリクエストを吸い上げる所を勉強してください。

配列?にしてデータを取得する必要があるのかなと思うのですが、その方法が分からないです。

配列にして頑張るのはRubyのerbテンプレートの話です。
JavaScriptではありません。

まずはRubyとerbを学習してください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

<ol>
  <li class="items"></li>
  <li class="items"></li>
  <li class="items"></li>
  <li class="items"></li>
  <li class="items"></li>
  <li class="items"></li>
  <li class="items"></li>
  <li class="items"></li>
  <li class="items"></li>
  <li class="items"></li>
</ol>
const items = document.getElementsByClassName("items");
for (const el of items) {
  el.innerText = "test";
}


取得したい要素全てに適当なクラス名を指定します。
次にJavaScriptでdocument.getElementsByClassName(任意のクラス名);で先程クラス名を書いた要素を配列で取得します。
取得した配列をforofなどを使ってDBから取得したデータを反映させればいいと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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