【JavaScript】読み込んだCSVの最終行の一部を計算を加えてHTMLに表示したい

Question

前提・実現したいこと

お疲れ様です。javascript初心者のyosshiiです。
現在CSVファイルをJavascriptで読み込んで、HTML上に生成するということをやっています。
具体的に言えば、PCの通信速度(Byte/secの単位)をファイルに記録しているので、それをHTML上にMbpsの単位で、1秒ずつ自動更新して表示させたいのです。

このようなCSVがあるとします。そして、随時同じ書き方で更新されます。
08/30/2020 13:04:24.000,1000
08/30/2020 13:04:25.000,2000
08/30/2020 13:04:26.000,3000
08/30/2020 13:04:27.000,4000
<省略>
08/30/2020 13:04:30.000,2000

そのcsvファイルの一番下の行(08/30/2020 13:04:30.000,2000)の2000の部分だけを少し計算して表示したいのです。
2000の部分はは単位がbyte/secなので、Mbpsに変更して、1秒ずつ自動で表示を更新したいのです。

そこで、初心者なりにがんばって書いたのですが、うんともすんとも言わず…困っています。コードは書きましたが消してしまいました…
コードの丸投げの質問は推奨されていませんが、優しい方、どのように書いたらいいのか教えてくださいm(__)m

Comments

[yambejp]

csvはどこにおいてあって、どのタイミングでどのように読み込む想定でしょうか？

[yosshii]

csvは外部サーバーに置いています。1秒ごとにその部分のみ自動更新する想定です

[Zuishin]

1 秒毎にすべてのデータを取得するのは無駄なので、追加部分だけを取得できるような API を作るのが良いと思います。

また、2000 bps は 0.0019 MBps です。頭にこんなに 0 をつける必要がありますか？ そのまま表示する方が見やすいと思います。

Answer 1

CSV はテキストベースのフォーマットなので、普通に文字列処理するだけです。

• Google検索 rfc csv

たとえば、CSVデータ全体を改行コードで分割すれば、最終行が取得できます。

var lines = csv.split(/\r?\n/);
var lastLine = lines[lines.length-1];

全行を走査したい場合、反復処理するだけです
（kuma_kuma_ さんが回答されているリンク先では for を利用している）。

---

追記）
初学のうちは「ページを１秒後に強制リロードする」という手法を経験しておいてもよいかもしれません

addEventListener("load",()=>{
  setTimeout( ()=>{
    location.reload();
  }, 1000);
});

• MDN location.reload()

Answer 2

JavaScriptでCSVファイルを読み込む方法
こちらで読み込み変換までの処理が記載しています。
処理が1秒ですのでCSVファイルの読み込みし処理が1秒以上かかれば表示がおかしくなりますので
元になるファイルを10分単位に分ける等の処理が必要になるかと思います。