jQueryで複数のcsvを読み込み、htmlに表示したい

前提・実現したいこと

jQueryで複数のcsvを読み込み、htmlに表示したいと考えています。

発生している問題・エラーメッセージ

具体的には以下のURLを参考にし、csvを読み込んでみたのですが、
複数ファイルを読み込みしようとするとすべて#csv-body1も#csv-body2にも
両方のcsvファイルのデータが表示されてしまいます。
[https://qiita.com/cnloni/items/5de03096a73c702b97ed]

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
6    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
7    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.9/jquery.csv.min.js"></script>
9
10    <script>
11        function readCsv(data) {
12            var target1 = '#csv-body1';
13            var target2 = '#csv-body2';
14            var csv = $.csv.toArrays(data);
15            var insert = '';
16            $(csv).each(function() {
17                if (this.length > 0) {
18                    insert += '<tr>';
19                    $(this).each(function() {
20                        insert += '<td>' + this + '</td>';
21                    });
22                    insert += '</tr>';
23                }
24            });
25            $(target1).append(insert);
26            $(target2).append(insert);
27        }
28        var csvfile1 = 'test1.csv';
29        var csvfile2 = 'test2.csv';
30        $(function(){
31            $.get(csvfile1, readCsv, 'text');
32            $.get(csvfile2, readCsv, 'text');
33        });
34    </script>
35    <link rel="stylesheet" href="list.css">
36</head>
37<body>
38    <table>
39        <caption>紫陽花の名所</caption>
40        <thead>
41            <tr><th>名前</th><th>場所</th><th>種類</th><th>株数</th></tr>
42        </thead>
43        <tbody id='csv-body1' />
44    </table>
45    <table>
46        <caption>紫陽花の名所</caption>
47        <thead>
48            <tr><th>名前</th><th>場所</th><th>種類</th><th>株数</th></tr>
49        </thead>
50        <tbody id='csv-body2' />
51    </table>
52</body>
53</html>

正しくそれぞれのcsvが対応する数字に読み込まれる方法、
またもっとコードをスマートにする方法があれば教えてください。

行動規範の内容に同意します

回答1件

回答：
関数[readCsv]の内容が、[#csv-body1]および[#csv-body2]どちらにも挿入する処理になっているため、CSVFile[test1.csv]と[test2.csv]を読み込み終わった後に、両方の領域に挿入されてしまうから。

改善方法：
・方針
読み込むCSVファイルの情報内容と、HTML内に挿入したい領域を紐づけるようにする

・改善例：
改善案前提
a.投稿者がES6以降の表記が分かるかが不明
b.callback関数の知識が不明
c.aよりpromiseおよびasync・await表記わかるかが不明
d.細かい挿入処理の手直しはしない

1.関数[ayncLoadCSV]を新設

javascript
1
2/**
3* 非同期でCSVデータの読み込みを行う
4* @param {string} filePath 読み込むファイルのパス
5* @param {string} insertTargetSelector CSV情報をHTML上に書き出す対象のセレクタ
6*/
7function asyncLoadCSV(filePath , insertTargetSelector ){
8　　　　// filePathで読み込んだcsvDataの読み込み後に、行う処理をラップする関数
9    var readCsvBindedFunc = function(insertSelector){
10	return function(csvData){
11			readCSV(insertSelector , csvData);
12		}
13    } 
14	// readCsvBindedFunc(insertTargetSelector) の戻り値は、関数 readCSVを読み込む関数が返却される。その結果、読み込み後に処理される。
15    $.get(filePath , readCsvBindedFunc(insertTargetSelector), 'text');
16}
17
18

2.関数[readCsv]の修正
引数によって、挿入先と挿入データを取得するようにする

javascript
1
2/**
3*
4*　引数で指定されたデータを引数で指定された領域に書き込む
5* ※処理の内容からすると関数名は[readCsv]よりも、CSVDataHTMLWriter　といった名前の方が適切な気がします。
6* @param {string} insertTargetSelector CSV情報をHTML上に書き出す対象のセレクタ
7* @param {string} data 挿入するCSV形式の文字列データ
8*/
9function readCsv(insertTargetSelector , data) {
10	var csv = $.csv.toArrays(data);
11	var insert = '';
12	$(csv).each(function() {
13		if (this.length > 0) {
14			insert += '<tr>';
15			$(this).each(function() {
16				insert += '<td>' + this + '</td>';
17			});
18			insert += '</tr>';
19		}
20	});
21	$(insertTargetSelector ).append(insert);
22}

3.全体プログラムの修正

javascript
1// 関数[asyncLoadCSV]および[readCsv]は定義済みとする
2// ロードするCSVのパスと挿入先のセレクタを定義したオブジェクト複数持つ配列
3// 挿入先と挿入CSVが増える場合に備え配列で定義
4var loadCSVParamList = [{path:'test1.csv',insertTarget:'#csv-body1'}, {path:'test2.csv',insertTarget:'#csv-body2'}];
5$(function(){
6	// ドキュメントロード後に loadCSVParamListに定義された CSV　データ内容を読み出す
7	// ※但し、複数が並列で通信するため、この辺りは要件に応じ変更必要あり
8	for(var i = 0 , len = loadCSVParamList.length ; i<len ;i++){
9		var csvLoadParam = loadCSVParamList[i];
10		asyncLoadCSV(csvLoadParam.insertTarget , csvLoadParam.path);
11	}
12});