Written by Kasumi

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ファイルを読み込み、配列で取得する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】比較演算子==と===の違いについて

2022.11.30
53
JavaScript

【JavaScript初心者向け】文字列・配列の要素数を調べる方法

2022.08.23
141
JavaScript

【簡単】JavaScriptを使ってhtmlタグを取得し、値を出力・書き換える方法

更新日:2022.09.09
219
JavaScript

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

更新日:2022.09.09
244