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

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

新規登録して質問してみよう
ただいま回答率
85.35%
CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2434閲覧

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

yosshii

総合スコア0

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/08/30 04:52

編集2020/08/30 05:13

前提・実現したいこと

お疲れ様です。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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/08/30 05:48

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

2020/09/01 13:08

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

2020/09/26 11:36

1 秒毎にすべてのデータを取得するのは無駄なので、追加部分だけを取得できるような API を作るのが良いと思います。 また、2000 bps は 0.0019 MBps です。頭にこんなに 0 をつける必要がありますか? そのまま表示する方が見やすいと思います。
guest

回答2

0

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

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

javascript

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

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


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

javascript

1addEventListener("load",()=>{ 2 setTimeout( ()=>{ 3 location.reload(); 4 }, 1000); 5});

投稿2020/09/26 11:12

編集2020/09/26 11:26
AkitoshiManabe

総合スコア5434

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2020/09/22 16:57

kuma_kuma_

総合スコア2506

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問