javascriptでテキストファイルやCSVファイルを読み込む方法。

rt();
function rt(){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET","xxx.txt",true);
    xmlHttp.send(null);
    xmlHttp.onload = function(){
        var data = xmlHttp.responseText;
    }
}

"use strict";
var csv = {
	load:async function(filename,id){
		await fetch(filename).then(data=>data.text()).then((res)=>{
			let result = (res.split("\r\n").map(value=>{
				return "<tr>" + (value.split(",").map(val =>{
					return "<td>" + val.slice(1, -1) + "</td>";
				})).join("") +"</tr>";
			})).join("");
			if(result){
				document.getElementById(id).innerHTML = result;
			}
		}).catch(m =>{
			console.error(m);
		});
		return true;
	}
}

csv.load("xxx.csv", "table");

"use strict";
var csv = {
	load:async function(filename,id){
		const res = await fetch(filename);
		const data1 = await res.text();
		let separate1 = /\r\n/;
		let separate2 = ",";
		let data_tbl = (data1.split(separate1)).map(function(value){
			return (value.split(separate2)).map(function(value1){
				return value1.slice(1, -1);
			});
		});
		var str = "";
		for (const key in data_tbl) {
			str+=`<tr>`;
			for (const key1 in data_tbl[key]) {
				str+=`<td>${data_tbl[key][key1]}</td>`;
			}
			str+=`</tr>`;
		}
		document.getElementById(id).innerHTML = str;
		return "OK";
	}
};

csv.load("xxx.csv", "table");

"use strict";
var csv = {
    load: function (filename, id) {
		fetch(filename).then(
			Response=>{
				return Response.text();
			}).then(data1 =>{
                let separate1 = /\r\n/;
                let separate2 = ",";
				let data_tbl = (data1.split(separate1)).map(function(value){
					return (value.split(separate2)).map(function(value1){
						return value1.slice(1, -1);
					});
				});
				var str = "";
				for (const key in data_tbl) {
					str+=`<tr>`;
					for (const key1 in data_tbl[key]) {
						str+=`<td>${data_tbl[key][key1]}</td>`;
					}
					str+=`</tr>`;
				}
				document.getElementById(id).innerHTML = str;
				return "OK";
			}).catch(error=>{
				console.log("失敗しました" + error);
			})
    }
};

csv.load("xxx.csv", "table");

"use strict";
var csv = {
    load: function (filename, id) {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", filename, true);
        xmlHttp.send(null);
        xmlHttp.onload = function () {
            if (xmlHttp.status === 200) {
                let separate1 = /\r\n/;
                let separate2 = ",";
				let data1 = xmlHttp.responseText;
				let data_tbl = (data1.split(separate1)).map(function(value){
					return (value.split(separate2)).map(function(value1){
						return value1.slice(1, -1);
					});
				});
				var str = "";
				for (const key in data_tbl) {
					str+=`<tr>`;
					for (const key1 in data_tbl[key]) {
						str+=`<td>${data_tbl[key][key1]}</td>`;
					}
					str+=`</tr>`;
				}
				document.getElementById(id).innerHTML = str;
				
            }
        };
    }
};

csv.load("xxx.csv?123", "table");

"use strict";
var csv = {
    load: function (filename, id) {
        var data = {};
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", filename, true);
        xmlHttp.send(null);
        xmlHttp.onload = function () {
            if (xmlHttp.status === 200) {
                let separate1 = /\r\n/;
                let separate2 = ",";
                let data_org = xmlHttp.responseText;
                let data_en = data_org.split(separate1);
                for (let d in data_en) {
                    data[d] = data_en[d].split(separate2);
                }
                //data load
                var t = document.getElementById(id);
                var h = "<table>";
                for (var o in data) {
                    h += "<tr>";
                    for (var r in data[o]) {
                        h += "<td>";
                        h += data[o][r].slice(1, -1);
                        h += "</td>";
                    }
                    h += "</tr>";
                }
                h += "</table>";
                t.innerHTML = h;
            }
        };
    }
};
csv.load("xxx.csv", "table");

"use strict";
class CsvCalc
{
	constructor (filename,elementId) 
	{
		this.filename = filename;
		this.elementId = elementId;
		this.datas = null;
		this.sum = [];
	}
	async getData()
	{
		try {
			const response = await fetch(this.filename);
			if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);
			this.datas = await response.text();
		} catch (err) {
			console.error("データ取得エラー:", err);
			this.datas = "";
		}
		return this;
	}
	csvSplit()
	{	
		let separate1 = /\r?\n/;
		let separate2 = ",";
		let datas = (this.datas?.split(separate1))?.map(function(row){
			return (row?.split(separate2))?.map(function(col){
				return col;
			});
		});
		this.datas = datas.filter(row => row.length > 0);
		return this;
	}
	getSum()
	{
		let sum =[];
		for (const data of this.datas) {
            (data).map(function(val,index,array){
                sum[index] = (isNaN(parseInt(sum[index]))?0:parseInt(sum[index])) + parseInt(array[index]);
            });
		}
		this.sum = sum;
		return this;
	}

	printSum()
	{
		document.getElementById(this.elementId).textContent = this.sum.join(',');
	}
}

(async ()=>{
	await (new CsvCalc("math.csv?", "sum"))
		.getData()
		.then(obj => obj.csvSplit().getSum().printSum());
})();