前回のあらすじ

何も知らないところからのhtml、CSS

プログラム自体は出来ているが記事にするまでに相当時間が空いた。
前回はレイアウトを作ることができた。
今回はリストをつくるために元のデータを読み込む。

#csvを読み込むために。

ローカルファイルのcsvを読み込みたい。
しかし、調べてみるとボタン操作をせずにファイルを読み込むためにはgoogleChromeではできないようだ。
さらに調べるとNode.jsを使えば操作できるようだ。ついでにデスクトップアプリ作成のためにElectronを導入することになる。

今後は

Node.js
Electron
が導入されている環境を想定して記事を書いていく。

最終的な表示の都合上、読み込むcsv元データはセル内改行を行っているものを想定する。
Excel→csvに変換したものである。

csvファイルの読み込みに関しモジュールを導入した。
npm で導入できるので詳細は検索して欲しい。

モジュール　fs　：ファイル読み込みのためのモジュール
モジュール　iconv-lite　：文字コード変換のためのモジュール

というわけでカキカキした。

//csvセル内での改行コードに対応(行の最後のセルはセル内改行されていないこと)
var database =[[]];   //データを格納するための変数
const fs = require('fs');
const iconv = require('iconv-lite');
var filename = __dirname + '\\database.csv'   //ファイルパスを記載
const content = fs.readFileSync(filename);　　//ファイルの読み込み
var buf = new Buffer.from(content, 'binary'); //バイナリデータにする
var buf2 = iconv.decode(buf,"Shift_JIS");   //文字コード変換
var database_tmp = buf2.split(',');　　　//,で区切り列ごとに配列に格納
var line_no =0;
var data_no =0;
var line_tmp;
for(var i=0;i<database_tmp.length;i++){
      //行末尾の改行コードを判定し該当すれば行とする
      if(database_tmp[i].indexOf('"')==-1 && database_tmp[i].indexOf('\n')>=0){
         line_tmp = database_tmp[i].split('\n');   //末尾の改行セルを分ける
         database[line_no][data_no]=line_tmp[0];   ///分けたセルを挿入
         line_no = line_no + 1;    //配列の中で計算できないため外で変数計算
         database[line_no]=[];   //行要素に列用の配列を挿入する
         databse[line_no][0]=line_tmp[1];   //行の頭として分割した片割れを挿入
         data_no =1;
      }else{
         database[line_no][data_no] = database_tmp[i].replace('"','');
         data_no = data_no + 1;  
      }
   }
}

これで自分の想定しているデータはセル内改行に対応してした。
が、コメントに書いたようにすべての形には対応していないのでコピペする人は当然だがテストして下さい。
※行の最後のセルはセル内改行されていないこと