【HTML, JS】csvファイルの中身をtableに表示する

はじめに

かんたんなWebサイトに更新履歴を表示する際，htmlファイルに直に更新履歴を追記するという方法もあるが，更新履歴を追記するためだけにhtmlファイルを開くのはナンセンスだと思った．
そこで，更新履歴はcsvファイルに記述し，jsを使って表示する，という方法を思いついたので，そのやり方と注意点をまとめる．

最初に実装したもの (良くない例)

index.html

<table id="displayCsv"></table>

<script>
function getCsv(){
  const req=new XMLHttpRequest()
  req.addEventListener("load", (event)=>{
    const res=event.target.responseText

    var line=res.split("\n")
    var str=[]
    var insert=""
    for(let i=0; i<line.length; i++){
      str=line[i].split(",")
      insert='<tr><td>'+str[0]+'</td><td>'+str[1]+'</td></tr>'
      document.getElementById("displayCsv").innerHTML+=insert
    }
  })
  req.open("GET", "input.csv", true)
  req.send()
}
//実行
getCsv()
</script>

実行結果

input.csv

2022.11.1,hogehoge
2022.11.10,fugafuga

index.html

<table id="displayCsv">
  <tbody>
    <tr>
      <td>2022.11.1</td>
      <td>hogehoge</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>2022.11.10</td>
      <td>fugafuga</td>
    </tr>
  </tbody>
</table>

問題点

• loop毎にinnnerHTMLに加算する方法では，行ごとにtbody要素が生成されてしまう．(加算するごとにDOMノードが生成される為？)
• 新しい履歴をcsvファイルの末尾に追記している為，この方法では最新の更新履歴が一番下に表示されてしまう．

再び実装

index.html

<table>
  <tbody id="displayCsv"></tbody>
</table>

<script>
function getCsv(){
  const req=new XMLHttpRequest()
  req.addEventListener("load", (event)=>{
    const res=event.target.responseText

    var line=res.split("\n")
    var str=[]
    var insert=""
    for(let i=0; i<line.length; i++){
      str=line[i].split(",")
      insert='<tr><td>'+str[0]+'</td><td>'+str[1]+'</td></tr>'
      document.getElementById("displayCsv").insertAdjacentHTML("afterbegin", insert)
    }
  })
  req.open("GET", "input.csv", true)
  req.send()
}
//実行
getCsv()
</script>

実行結果

input.csv

2022.11.1,hogehoge
2022.11.10,fugafuga

index.html

<table>
  <tbody id="displayCsv">
    <tr>
      <td>2022.11.10</td>
      <td>fugafuga</td>
    </tr>
    <tr>
      <td>2022.11.1</td>
      <td>hogehoge</td>
    </tr>
  </tbody>
</table>

どう直したのか

• idをtable要素ではなくtbody要素に付加した．
  → 行ごとにtbody要素が生成されるのを防げる．
  (insert=...をinsert+=...に変え，innnerHTML+=insertをloopの外に出したうえでinnnerHTML=insertに変えることでも解決するが，この方法では2つめの問題点を解決できない．)
• innnerHTMLではなくinsertAdjacentHTML()を使用した．
  → これにより最新の更新履歴がいちばん上に表示されるようになる．

参考文献

• Element.innerHTML - Web API | MDN
  https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML
• element.insertAdjacentHTML - Web API - MDN Web Docs
  https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML
• JavaScriptでCSVをHTML表示
  https://qiita.com/hiroyuki-n/items/5786c8fc84eb85944681