素のJSでタイマー機能を作ってみた③ firebaseからデータを取得して時間の処理

はじめに
メイン
おわりに

はじめに

前回に引き続き続きを作っていきます。

素のJSでタイマー機能を作ってみた② firebase実装

✅参考

削除はコンソールからできなくてコマンドで対応するとのこと。

firebase hosting:disable

メイン

✅合計時間の計算

※最初forEachを使っていましたが、mapメソッドとfilterメソッドを使ってだいぶ短く記載できました。

すべてのデータからtimeの値だけピックアップ

以下は連想配列(※JSの場合オブジェクトと同義)で扱う。

Object.keys(allDB).forEach((key) => {
  ttlTimeDB[key] = allDB[key].time;
})

以下でも行けた。この場合、配列なのでキーが0からauto incrementされる。

let array = [];
Object.keys(allDB).forEach((key) => {
  array.push(allDB[key].time);
})

🙄今回は1つ目のパターンで、キーを明示的に指定できる方を採用します。

~~さらにtimeの値から””を取り除くのにif文。~~

⇒mapメソッドとfilterメソッドを知ったのでそっちで記載しました。

let timeDB = allDB.map(key => key.time);
timeDB = timeDB.filter(value => value !== "");

🙄便利すぎる～～！！

✅値の取得

上記で取得したデータは〇時間〇分となっているので、時間と分を切り分けて計算できるようにしていきます。

timeDB = timeDB.map(value => {
  let array = value.split( /時間|分/ );
  array.pop(); // [ '2', '30', '' ]になっているので最後の要素を取得して削除
  return array;
});

以下出力結果

[
  [ '3', '4' ],
  [ '2', '30' ],
  [ '4', '25' ],
  [ '3', '46' ],
  [ '2', '20' ],
  [ '1', '0' ]
]

🙄だいぶJS使いこなせてきた感。

そのあと時間と分数を個別に足し算⇒繰り上げ処理で以下の感じ。

timeDB.forEach((value,index)=> {
  ttlH += Number(timeDB[index].shift()); // 先頭の要素を取得し削除
});

timeDB.forEach((value,index)=> {
  ttlM += Number(timeDB[index].shift()); // 先頭の要素を取得し削除
});

if (ttlM >= 60 ){
  carryH = (Math.floor(ttlM / 60));
  ttlH += carryH;
  ttlM -= (carryH*60)
}

確認