[javascript] onload内の機能を関数化し、間接的に処理をする方法がわからない

Question

<input type="file">から登録したcsvファイルを<table>に表示させる機能を作成しました。
登録したファイルのリストから任意の行数を選択し、ランダムに表示させる機能を追加するため、行数を入力するための<input>を新しく設け、そこにバリデーションをつけたいと考えています。

最初に登録したcsvファイルの変数itemsを利用してcsvが登録されているかどうかを判断するためonload内に入れていたlet items=[]をグローバルにしたのですが、それではちょっと危険かなと思いitems = fileResult.map((item) =>...(略) の機能を外に出して、間接的に処理をしたいです。

説明が不足していたらすみません、そもそものやり方がイマイチ、といったご意見も含め、アドバイスいただけたら幸いです。

▼期待する動作が得られるコード

// register csv
const fileInput = document.getElementById("upload_file");
const message = document.getElementById("message");

// define FileReader
const fileReader = new FileReader();
let items = [];

// ファイル変更時イベント（change）
fileInput.addEventListener("change", (e) => {
  message.innerHTML = "読み込み中...";
  const file = e.target.files[0];

  // ファイル読込
  if (file.type === "text/csv") {
    fileReader.onload = () => {
      let fileResult = fileReader.result.split("\r\n"); // 改行

      // 先頭行をヘッダに
      let header = fileResult[0].split(",");
      header.unshift("優先", "除外");
      fileResult.shift();

      // 関数にしたい
      items = fileResult.map((item) => {
        let data = item.split(",");
        data.unshift(undefined, undefined);
        let result = {};
        for (let index in data) {
          let key = header[index];
          result[key] = data[index];
        }
        return result;
      });
      console.log("items");
      console.log(items);

      // テーブル初期化
      let tbody = document.querySelector("#csv_data_table tbody");
      tbody.innerHTML = "";

      // CSVの内容を表示
      let tbody_html = "";
      for (item of items) {
        tbody_html += `<tr>
          <td><input type="checkbox" ></td>
          <td><input type="checkbox" ></td>
          <td>${item.status}</td>
          <td>${item.name}</td>
          <td>${item.furigana}</td>
          <td>${item.base}</td>
          <td>${item.department}</td>
        </tr>
        `;
      }
      tbody.innerHTML = tbody_html;
      message.innerHTML = items.length + "名のデータを読み込みました。";
    };
    fileReader.readAsText(file);
  } else {
    console.log("invalid file type.");
    message.innerHTML = items.length + "csvファイルを登録してください。";
  }
});

▼ items = fileResult.map((item) => ...がうまく関数化できていないコード

// register csv
const fileInput = document.getElementById("upload_file");
const message = document.getElementById("message");

// define FileReader
const fileReader = new FileReader();
let items = [];

// 外に出した
const depictTable = (target) => {
  target.map((item) => {
    let data = item.split(",");
    data.unshift(undefined, undefined);
    let result = {};
    for (let index in data) {
      let key = header[index];
      result[key] = data[index];
    }
    return result;
  });
};

// ファイル変更時イベント（change）
fileInput.addEventListener("change", (e) => {
  message.innerHTML = "読み込み中...";
  const file = e.target.files[0];

  // ファイル読込
  if (file.type === "text/csv") {
    fileReader.onload = () => {
      let fileResult = fileReader.result.split("\r\n"); // 改行

      // 先頭行をヘッダに
      let header = fileResult[0].split(",");
      header.unshift("優先", "除外");
      fileResult.shift();

     // itemsに値が入らない（undefined）
     items = depictTable(fileResult);

      // テーブル初期化
      let tbody = document.querySelector("#csv_data_table tbody");
      tbody.innerHTML = "";

      // CSVの内容を表示
      let tbody_html = "";
      for (item of items) {
        tbody_html += `<tr>
          <td><input type="checkbox" ></td>
          <td><input type="checkbox" ></td>
          <td>${item.status}</td>
          <td>${item.name}</td>
          <td>${item.furigana}</td>
          <td>${item.base}</td>
          <td>${item.department}</td>
        </tr>
        `;
      }
      tbody.innerHTML = tbody_html;
      message.innerHTML = items.length + "名のデータを読み込みました。";
    };
    fileReader.readAsText(file);
  } else {
    console.log("invalid file type.");
    message.innerHTML = items.length + "csvファイルを登録してください。";
  }
});

Answer 1

depictTable が何も return してないからでしょう。

const depictTable = (target) => {
  return target.map((item) => {

Comments

[happyylemon]

ありがとうございます。
ご指摘の点と、
let header = [];
を外に出すことで解決しました。