カテゴリー: ホームページ製作

JavaScriptで2つのCSVファイルの差分をとり表示する方法。

JavaScriptでやりたかったこと。

• 2つのcsvファイルを読み込み、配列にする。
• 配列を比較し、一致した場合、片方の配列に片方の要素を入れる。
• 一致した配列を、サイトにテーブルで表示する。
• テーブルをソート、並べ替えができるようにする。

このページでやりたかったこととほぼ同じ。
CSVを照らし合わせながら、HTMLにデータを出力。
https://teratail.com/questions/115522

jQuery.csv.jsでcsvファイルを読み込めることが分かった。
あと、テーブルをソートするには、tablesorter.jsを入れた。

ファイルの読み込みに$.ajaxでもよかったが、$.getにした。
https://qiita.com/cnloni/items/5de03096a73c702b97ed

ただ、ファイル読み込み時に文字コードエラーがあったので、これらを参考。
https://masshiro.blog/jquery-excel-csv/
https://teramako.hatenadiary.org/entry/20080913/p1

読み込んだファイルを配列にするために、こちらを参考。
https://uxmilk.jp/11586

二つのファイルを個別の配列にしたら、配列を比較し、一致したら片方の配列に片方の要素を入れる。
https://www.softel.co.jp/blogs/tech/archives/5527

ここで、表示したい配列が完成した。

そして次に配列をテーブルで表示させる。
https://algorithm.joho.info/programming/javascript/table-array-2d-js/

テーブルにソートするのにヘッダーtheadが必要なので、これらを参考。
https://www.w3schools.com/jsref/met_table_createthead.asp
https://www.aspsnippets.com/Articles/Insert-Header-Cell-TH-element-in-HTML-Table-using-JavaScript.aspx

テーブルができたので、ソートできるtablesorter.jsを入れる。
https://beiznotes.org/install-tablesorter/

そして完成したのが、下記のページ。
https://kinkenshop.sakura.ne.jp/pr/pr.html

// 表の作成　data_dはthead用の配列データ、data_bはtbodyの配列データ、tableIdはtableのid
function makeTable(data_h, data_b, tableId){
    //theadを作成
    var t_head = document.getElementById(tableId).createTHead();
    //tbodyを作成
    var t_body = document.createElement("tbody");

    //theadにtrを作成
    var t_head_row = t_head.insertRow(-1);

    //tbody用の空配列
    var t_body_rows=[];

    //theadのtrにthを配列の数だけ作成
    for (var k = 0; k < data_h.length; k++) {
         //thを作成
         var headerCell = document.createElement("TH");
         //thにthead用の配列データを一つ挿入
         headerCell.innerHTML = data_h[k];
         //theadのtrにthとthead用の配列データを挿入。ヘッダーに自動で加えられる
         t_head_row.appendChild(headerCell);
    }

    //tbodyのtrにtdを2次元配列の数だけ作成
    for (i = 0; i < data_b.length; i++) {
         //tbody用の空配列にtrを追加
         t_body_rows.push(t_body.insertRow(-1));

         //tbodyのtrにtdを配列の数だけ追加
         for (j = 0; j < data_b[0].length; j++){
              //tbodyのtrにtdセルを挿入
              cell = t_body_rows[i].insertCell(-1);
              //tdセルにtbodyの配列データを挿入
              cell.appendChild(document.createTextNode(data_b[i][j]));
         }
    }

    // 指定したtable id要素にt_bodyを加える。
    document.getElementById(tableId).appendChild(t_body);
}

$(function(){
  //二つファイルを読み込み、テーブルを作る関数に渡す
  $.get({
    //list.csvを読み込む
    url: './list.csv',
    dataType: 'text',
    beforeSend: function(xhr) {
      xhr.overrideMimeType('text/plain;charset=utf-8');
    },
  }).done( function(list_data){ //ajaxの通信に成功した場合

    //一覧表のlist.csvを配列list_csvにする
    var list_csv = $.csv.toArrays(list_data);

    $.get({
      //google.csvを読み込む
      url: './google.csv',
      dataType: 'text',
      beforeSend : function(xhr) {
        xhr.overrideMimeType('text/plain;charset=utf-8');
      },
    }).done( function(google_data){ //ajaxの通信に成功した場合

      //google.csvを配列google_csvにする
      var google_csv = $.csv.toArrays(google_data);

      //配列google_csvの一致する行に配列list_csvを追加にする
      for ( i = 0; i < google_csv.length; i++ ){
        for ( j = 0; j < list_csv.length; j++ ){
          if ( google_csv[i][0] === list_csv[j][2] ){
            google_csv[i].unshift( list_csv[j][1] );
            google_csv[i].unshift( list_csv[j][0] );
          }
        }
      }

      //thead用配列
      var data_head = ["番号","都道府県","ページ名","表示回数","価格"];

      //テーブルを作る関数(thead用配列、tbody用配列、table id)
      makeTable(data_head, google_csv, "tableSET");

      //クリックでtablesorterによる並べ替え
      $("#tableSET").tablesorter();

    }).fail( function(){ //google.csvの読み込みに失敗した場合
      alert("error!");
    });
  }).fail( function(){ //list.csvの読み込みに失敗した場合
    alert("error!");
  });
});

htmlファイルにはこちらのコードを書く。

<table id="tableSET" class="tablesorter"></table>