JavaScriptでCSVファイルを読み込んで出力するときの注意点

JavaScriptでCSV読み込み

JavaScriptでCSVファイルを読み込んだものをWebサイト内に表示したいことがある。

例えば下記のようなCSVファイルを読み込もうとする場合…

りんご, 100
バナナ, 200
みかん, 300

JavaScriptはこのようになる。

// 間違ったコード
// <div id="r"></div>
function getCSV() {
  var req = new XMLHttpRequest();
  req.open('get', 'sample.csv', true);
  req.send(null);
  req.onload = function() {
    setCSV(req.responseText);
  };
}
function setCSV(str) {
  var data = [];
  var dataArr;
  var r = document.getElementById('r');
  var tmp = str.split('\n');
  tmp.forEach(x => {
    dataArr = x.split(',');
    data.push(dataArr);
  });
  var t = '<dl>';
  data.forEach(x => {
    t += `<dt>${x[0]}</dt><dd>価格は${x[1]}円</dd>`;
  });
  t += '</dl>';
  r.innerHTML = t;
}
getCSV();

一見すると問題ないように見えるが、実際にこのコードでページ内に表示させると、こちらのリンク先のように表示されてしまう。

JavaScriptでCSV読み込み(誤)

CSVの最終行と値の空白を除外する

上記のコードだと空行も配列として追加してしまうためif (dataArr[0])で値が存在する場合だけ配列に追加するよう条件分岐が必要だ。

あとサンプルのCSVではカンマのあとに半角スペースが入っているが、split(',')を使用しているため半角スペースも値に残ってしまい、表示に影響が出てしまう。

これを防ぐにはtrim()を使用して値の前後の半角スペースを除外する。

// 正しいコード
// <div id="r"></div>
function getCSV() {
  var req = new XMLHttpRequest();
  req.open('get', 'sample.csv', true);
  req.send(null);
  req.onload = function() {
    setCSV(req.responseText);
  };
}
function setCSV(str) {
  var data = [];
  var dataArr;
  var r = document.getElementById('r');
  var tmp = str.split('\n');
  tmp.forEach(x => {
    dataArr = x.split(',');
    if (dataArr[0]) {
      data.push(dataArr.map(x => x.trim()));
    }
  });
  var t = '<dl>';
  data.forEach(x => {
    t += `<dt>${x[0]}</dt><dd>価格は${x[1]}円</dd>`;
  });
  t += '</dl>';
  r.innerHTML = t;
}
getCSV();

JavaScriptでCSV読み込み(正)