jQueryで複数のCSVを同時読込み

らら
らら

はじめに

今回は、過去にやったものがどこいったのかわからなくなって探すの苦労したから

ほんとに個人的メモです。

jquery.csv.min.jsとajax($.get)での扱い方

ダメな方法

非同期を何も考えないと。。

下記だと、$.getが非同期なのでCSVの処理の部分順番には処理できません。


<!-- jQuery本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jquery-csv -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"></script>
<script>
$(function() {
	$.get("./csv1.csv",function(data){
		var csv = $.csv.toArrays(data);
		$(csv).each(function(i) {
			if (this.length > 0) {
				var a = this[0];
				var b = this[1];
				var c = this[2];
			}
		});
	});
	$.get("./csv2.csv",function(data){
		var csv = $.csv.toArrays(data);
		$(csv).each(function(i) {
			if (this.length > 0) {
				var a = this[0];
				var b = this[1];
				var c = this[2];
			}
		});
	});
});
</script>

対処方法１

なので下記のように書いていくと。。。

何個もCSVがあると・・・・・階層が・・・

下記にようにすることでcsv1.csvとcsv2.csv２つが読み込み終わってからイベントが発火します。


<!-- jQuery本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jquery-csv -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"></script>
<script>
$(function() {
	$.get("./csv1.csv",function(data){
		$.get("./csv2.csv",function(data2){
			var csv = $.csv.toArrays(data);
			$(csv).each(function(i) {
				if (this.length > 0) {
					var a = this[0];
					var b = this[1];
					var c = this[2];
				}
			});
			var csv2 = $.csv.toArrays(data2);
			$(csv2).each(function(i) {
				if (this.length > 0) {
					var a = this[0];
					var b = this[1];
					var c = this[2];
				}
			});
		});
	});
});
</script>

対処方法２

jQuery.when()をつかうやつ・・これが探してたやつ・・

$.getでなくても、$.getJSONも同様にできます。

階層が深くならないように対応

注意点は上記のdataの部分がdata[0]でないといけない点です。


<!-- jQuery本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jquery-csv -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"></script>
<script>
$(function() {
	$.when($.get("./csv1.csv"), $.get("./csv2.csv"),$.get("./csv3.csv")).done(function(data, data2, data3) {
		var csv = $.csv.toArrays(data[0]);
		$(csv).each(function(i) {
			if (this.length > 0) {
				var a = this[0];
				var b = this[1];
				var c = this[2];
			}
		});
		var csv2 = $.csv.toArrays(data2[0]);
		$(csv2).each(function(i) {
			if (this.length > 0) {
				var a = this[0];
				var b = this[1];
				var c = this[2];
			}
		});
		//data3[0]とか・・・・複数分
	});
});
</script>

さいごに

jQueryは、記述省略できるから、やめられない・・・

document.getElementByIdとか・・・書くのめんどい・・・

まぁ。個人的には、遅いといわれるかもしれないが、jQuery全盛期からするとPCのスペックも上がってるし・・と

重たい、フレームワークで作るよりは、簡易な機能は、jQueryつかってもいいかと

あるある言い訳で・・・

では・・

関連記事