概要

外部から取り込んだ CSV ファイルを JSON に変換して表示させる Vue コンポーネントの実装例です。

コンポーネントのコード

<template>
  <div>
    <input type="file" @input="handle" />
    <div>{{ data }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  methods: {
    handle(event) {
      const file = event.target.files[0];

      file.text().then((csv) => {
        const array = csv.split("\n");
        const header = array[0].split(",");
        const body = array.slice(1).map((arr) => arr.split(","));

        this.data = body.map((b) => {
          let result = {};

          header.forEach((head, index) => {
            result[[head]] = b[index];
          });

          return result;
        });
      });
    },
  },
};
</script>

解説

ファイルが選択されると、input イベントがトリガーされて handle メソッドが実行されます。

handle メソッドでは、まず引数のイベントデータから選択された File オブジェクトを取り出します。
そして、text() メソッドを呼び出しテキストデータを読み込みます。

最後に、読み込んだデータをヘッダーとボディに分け、それらを使って新しい JSON オブジェクトの配列を生成しています。