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

: らら

2023.10.02

JavaScript

はじめに

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

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

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>