JavaScriptでCSVを取り込み表示する(HTML)

JavaScriptでCSVを取り込み表示する(HTML)

こんにちは。

プログラム学習中のdynaです。

今回は、JavaScriptでCSVを取り込んで、HTMLに表示したいなーと思ったので、その備忘録です。

 

(※検索すると、沢山情報が出てきますので、分かりやすいように自分用のメモになります。)

 

取り込むCSV

こんな感じのCSVファイルを読み込んで、HTML上(ブラウザ上)に反映させたいと思います。

※このCSVはダミーテキストです。


 

出来上がり形式

手順としては、

・XMLHttpRequest();でCSVの取り込み
・取り込んだ内容を配列に格納
・格納した内容を、HTMLの表示用にする

という流れで作成するようです。

 


XMLHttpRequestでCSVの取り込み

まずは外部ファイルのCSVを取り込むためにXMLHttpRequest()を使います。

XMLHttpRequest()とはサーバーとブラウザ間でデータの送受信をするときに使用されます。

サーバーに指定ファイルをリクエストして、その結果を受け取れるという流れですね。

ちなみに、ローカルで上記を実行するとクロスオリジンエラーが出るので、私はxammp上で試して実しています。

 

HTTP リクエストを送るには、 XMLHttpRequest オブジェクトを作成し、 URL を開いてリクエストを送信します。トランザクションが完了すると、オブジェクトには結果の HTTP ステータスコードやレスポンスの本文などの有益な情報が格納されます。

引用元:https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

 

実際のコードで関連部分だけ抜粋して書いてみます。

 

それぞれ何やってるんだろう?と思ったので、調べた事を記載していきます。

 

XMLHttpRequest()オブジェクト の作成

上記内容は、new で XMLHttpRequest()オブジェクト を作成しています。

その後、openメソッドで各設定、CSVデータの指定をしています。

  

XMLHttpRequest.openでの指定

XMLHttpRequest.openについてはこちらを参考にしています↓

 

参考:https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/open

method・・・使用する HTTP リクエストメソッド。 "GET""POST""PUT""DELETE" など。

url・・・リクエストを送信する URL (ここでいうとCSVファイルです)

async・・・操作が同期処理か、非同期処理かを表す。規定値はtrue(非同期)。falseの場合は 同期処理として扱われる。

 

XMLHttpRequest.sendで要求の送信

XMLHttpRequest.sendで要求を送信します。

 

XMLHttpRequest の send() メソッドは、リクエストをサーバーに送信します。

リクエストが非同期の場合 (これが既定)、このメソッドはリクエストが送信されるとすぐに戻り、結果はイベントを用いて配信されます。リクエストが同期の場合、このメソッドはレスポンスが到着するまで戻りません。

引用元:https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/send

 

引数の規定値はnullです。

 

レスポンスの確認

先ほどのコードで以下を記載してみます。

 

 

6行目のconsole.logで結果を確認できます。

 

出力結果

 

ここまでで、レスポンスがちゃんと返っているのが分かりました。

では、xhr.onloadのコードの中に何が書いてあるか調べてみます。 

 

XMLHttpRequest.responseText

 

XMLHttpRequest の responseText プロパティは読み取り専用で、送信されたリクエストに続いてサーバーから受け取ったテキストを返します。

引用元:https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/responseText

これがレスポンスですね。

そして、このレスポンスの進行状況を示す(?)のが、以下のredyState、statusのようです。

 

XMLHttpRequest.readyState

XMLHttpRequest.readyState プロパティは XMLHttpRequest (XHR) クライアントの状態を返します。XHR クライアントは次の状態のいずれかをとります。

引用元:https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/readyState

 

状態説明
0UNSENTクライアントは作成済み。 open() はまだ呼ばれていない。
1OPENEDopen() が呼び出し済み。
2HEADERS_RECEIVEDsend() が呼び出し済みで、ヘッダーとステータスが利用可能。
3LOADINGダウンロード中。responseText には部分データが入っている。
4DONE操作が完了した。

 

XMLHttpRequest.status

XMLHttpRequest.status プロパティは読み取り専用で、 XMLHttpRequest のレスポンスにおける数値の HTTP ステータスコードを返します。

リクエストが完了する前は、 status の値は 0 になります。 XMLHttpRequest がエラーになった場合も、ブラウザーはステータスとして 0 を返します。

引用元:https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/status

 

ここでXMLHttpRequest.statusが200なら完了とみなしています。

 

取り込んだCSVを配列に格納する

次は返ってきたCSVをHTMLに表示させるために、まず配列に格納します。

 

ここでは、読み込んだCSVの行ごとに分割して配列にします。

ここでconsole.logで表示してみると、以下になります↓

 

ちゃんと配列になってますね!!

 

配列をHTMLのtableにする

配列になったので、HTMLに表示用のコードにします。

 

ここは実は結構躓きました。

こちらのサイトを参考にさせていただいてます。

https://qiita.com/hiroyuki-n/items/5786c8fc84eb85944681

※いつもありがとうございます。

 

let insert でHTML出力の変数を作成して、forEachで配列の中身を<tr>をつけています。

また、さらに<td>をつけてHTMLに出力しています。

 

全体のコード

 

出力結果

これだけなのですが、色々勉強になりました・・・!

引き続き勉強したいと思います。

1人立ちまでの道のりは長いですね・・・( ;∀;)

 

<合わせて読みたい>