JavaScriptでCSVファイルを読み込み！配列で取得する方法
JavaScriptを使ってCSVファイルを読み込み、配列として取得したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装コード例
// CSVファイルを取得
let csv = new XMLHttpRequest();
// CSVファイルへのパス
csv.open("GET", "product.csv", false);
// csvファイル読み込み失敗時のエラー対応
try {
csv.send(null);
} catch (err) {
console.log(err);
}
// 配列を定義
let csvArray = [];
// 改行ごとに配列化
let lines = csv.responseText.split(/\r\n|\n/);
// 1行ごとに処理
for (let i = 0; i < lines.length; ++i) {
let cells = lines[i].split(",");
if (cells.length != 1) {
csvArray.push(cells);
}
}
// コンソールに配列を出力
console.log(csvArray);
JavaScriptを使ってCSVファイルを読み込み、配列として取得するコード例です。
HTTP通信を介してサーバーとのデータやり取りを可能にするXMLHttpRequestオブジェクトを使ってます。
配列に変換後、コンソールにCSVデータが出力されます。
コードの詳細は以下の通りです。
XMLHttpRequestを定義
// CSVファイルを取得
let csv = new XMLHttpRequest();
// CSVファイルへのパス
csv.open("GET", "product.csv", false);
まず最初にnewを使ってXMLHttpRequestオブジェクトを生成します。
openメソッドを使って、第一引数にGETを指定。
第二引数にCSVファイルへのパスを指定します。
以上でCSVファイルの読み込みが完了です。
配列に変換
// 配列を定義
let csvArray = [];
// 改行ごとに配列化
let lines = csv.responseText.split(/\r\n|\n/);
// 1行ごとに処理
for (let i = 0; i < lines.length; ++i) {
let cells = lines[i].split(",");
if (cells.length != 1) {
csvArray.push(cells);
}
}
次にJavaScriptでCSVデータを参照出来るように配列に変換します。
空の配列変数を定義。
responseTextを使ってCSVデータを文字列として習得。
splitで改行事に配列化します。
forで上記配列を繰り返し処理。
CSVのセルはコンマ（,）区切りで表現されてます。
splitでコンマ事にさらに配列化します。
コンソールに出力。
CSVデータを配列形式で参照出来ていたら成功です。
まとめ
JavaScriptでCSVファイルを読み込み、配列で取得する方法について紹介しました。
以上で解説を終わります。
目次