Day2 今晚我想来点CSV

• Data format

CSV(Comma-Separated Values)可以说是在偏乡环境最通俗的资料档案格式(SQL是天龙国才有的东西吧)，所以我们第一步先来汇入CSV档案并将里面资料呈现出来。

• Import CSV file

首先我们先来建立一个可以汇入的档案的按钮，直接修改Dashboard那一栏右侧原本的按钮，先将下拉式的this week按钮拿掉，然後将Export按钮的名称改成Import，并在tag内增加按一下去的属性(onclick)，并在让它等於按下去会执行的动作(我们就叫createTable()，一个JavaScript的function)。然後另一个Share的按钮也没用到，把它也删了。我们在前方改增加一个input的tag来开启档案，type属性设定为file，accept属性设定.csv，这样浏览档案时就会自动帮你过滤只剩副档名为.csv的，class属性就和button的用一样，最後要设定id属性，我们这边把它叫csvFile，这样等会JavaScript才找的到它。

<input type="file" id="csvFile" accept=".csv" class="btn btn-sm btn-outline-secondary"/>
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="createTable()">Import</button>

• CSV to table

同样我们需要在原本的table的tag中增加id属性(就叫dataTable)，然後在开发资料夹建立一个新的JavaScript档案叫table.js，让它控制table的功能。接着我们就可以去问Google大神怎麽将csv转成table，其中可以找到一些启发，但从启发中当然要做修改，首先我们做一个将csv转成array的function，用split和forEach的loop将csv的资料放入array中，其中每行(row)的结尾会有\r，我们可以用trimEnd()把它去掉：

function csvToArray(result) {
  let resultArray = [];
  result.split("\n").forEach(function(row) {
    if (row) {
      row = row.trimEnd();
      let rowArray = [];
      row.split(",").forEach(function(cell) {
        rowArray.push(cell);
      });
      resultArray.push(rowArray);         
    }
  });
  return resultArray;
}

然後将array转成table，这边就是按照HTML的table的格式将原本的array的资料放入，写成文字串。眼尖的人会注意到有个keyName的变数没用到，这是之後的伏笔：

function arrayToTable(result, keyName) {
  var array = csvToArray(result); //this is where the csv array will be
  let content = "";
  let count = 0;
  array.forEach(function(row) {
    if (count == 0) { 
      content += "<thead><tr>";
      let count_cell = 0;
      row.forEach(function(cell) {
          content += "<th>" + cell + "</th>" ;
          count_cell = count_cell + 1;
      });
      content += "</tr></thead>";
      content += "<tbody>";
    } else {
      content += "<tr>";
      row.forEach(function(cell) {
          content += "<td>" + cell + "</td>" ;
      });
      content += "</tr>";
    }
    count = count + 1;
  });
  content += "</tbody>";
  return content;
}

最後将变数从输入的input tag到输出的table tag所对应的id位置接起来，并将此function命名对应到刚刚Import按钮onclick执行的功能名称：

function createTable() {
  let csvFile = document.getElementById("csvFile");
  let reader = new FileReader();
  let f = csvFile.files[0];
  reader.onload = function(e) {
    document.getElementById("dataTable").innerHTML = arrayToTable(e.target.result, "data");
  };
  reader.readAsText(f);
}

拆成三部分的function是为了以後的延伸性和弹性。再来我们将HTML加入呼叫这个JavaScript的脚本，然後就可以建一个测试的csv资料来试试。

名字,数学,英文,国文,美术,程序
小琪,78,88,70,65,47
小华,85,72,66,54,91
小美,65,73,89,92,56
小明,70,58,43,82,66

这边特别保留原本HTML中原本table里面的资料，以用来要看汇入之後的改变，之後测试後可以拿掉了。选择CSV档案後按下Import的成果如下：