サーバ上にある複数のCSVファイルを読み込み、Mapに格納する

概要

この記事では、サーバ上に置いてあるCSVファイルを、javascriptの変数に格納するソースコードを紹介しています。何列あってもOKです。

CSVファイルの形式

CSVファイルは、タブ区切りで全ての要素が「"」で囲われています。加えて、1行目はタイトル行とします。

"title" "text"
"タイトル1" "テキスト1"
"タイトル2" "テキスト2"
"タイトル3" "テキスト3"

このファイルは、htmlと同じ階層に保存されているとします。

ソースコード

let map = new Map();
const files = ["data1.csv", "data2.csv"];

onload = function() {
  Promise.all(
    files.map((path, index) => {return loadFile(path, index)})
  ).then(values => {
    values.forEach(result => {
      const no = result[1].toString();
      const csv = result[0];
      map.set(no, {data: getCsvToArray(csv)});
    });

  }).catch(reason => {
    console.error(reason);
  });
}

function loadFile(path, no) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open("POST", path, true);

    request.onload = (event) => {
      if (request.status !== 200) reject(request.statusText);
        resolve([request.responseText, no]);
      }
      request.onerror = (event) => {
        reject(request.statusText);
      }
    request.send();
  });
}

function getCsvToArray(csv) {
  let keys;
  return csv.split("\n").filter(line => {return line.length !== 0}).reduce((array, line, index) => {
    let column = line.split("\t").map(element => {
      return element.slice(1).slice(0, -1).replace(/""/, '"');
    });

    if(index === 0) {
      keys = column;

    } else {
      let container = keys.reduce((object, key, index) => {
        object[key] = column[index];
        return object;
      }, new Object());
      array.push(container);
    }
    return array;

  }, new Array());
}