🏍️

【JavaScript】CSVからObjectに変換

2023/04/30に公開

JavaScript

Vue.js

csv

tech

概要

下記の様な形式のCSVファイルをObjectに変換するコードになります。
1行目をヘッダー、2行目以降をデータとしています。

name,age,job
bob,26,enginner
sam,29,designer
kaci,33,manager

const res = [
  {name:'bob',age:'26',job:'enginner'},
  {name:'sam',age:'29',job:'designer'},
  {name:'kaci',age:'33',job:'manager'}
]

完成物

流れ

inputタグにファイル選択時に発火するメソッドを設定

<input type="file" accept=".csv" @input="changeFile">

const changeFile = async (event) => {
  // 処理を記載
};

2.eventからFileObjectを取得

const [file] = e.target.files;

3.FileReaderでFileの内容を読み込み

const reader = new FileReader();
reader.readAsText(file);
// reader.onloadがコールバック関数であり、今回は直列で実行したいためPromiseで囲う
await new Promise((resolve) => (reader.onload = () => resolve()));
console.log(reader.result)

4.Fileの内容からObjectに変換

// 文字列形式で取得するので改行文字で区切って配列に変換
const lineList = reader.result.split("\n");
// 1行目はKeyとして利用するため
const keyList = lineList[0].split(",");
const resultObj = lineList
      .filter((_, index) => index !== 0) // 2行目以降がデータのため
      .map((line) => {
        const valueList = line.split(",");
        const tmpObj = {};
        keyList.map((key, index) => (tmpObj[key] = valueList[index]));
        return tmpObj;
　　　　});

概要

完成物

流れ

Discussion