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

小中大

☀️🌙

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

2018年11月13日

文字数[6466文字] この記事は8分5秒で読めます.

Logging

この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。

javascriptでテキストファイルやCSVファイルを読み込む方法は下記になります。
この他に、jqueryだとajaxを使用して読み込む方法などもありますが、あえて
javascriptで記述しています。

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

追記：アクセス数が結構あるのでサンプルを作りました。
下記のコードをお試しください。
デモページはこちらになります。
https://zip358.com/tool/demo13/ 【改良前】
https://zip358.com/tool/demo13/index2.php 【ちょっと改良】
https://zip358.com/tool/demo13/index3.php 【もうちょっと改良】
https://zip358.com/tool/demo13/index4.php 【もっと改良】
https://zip358.com/tool/demo13/index5.php 【もっともっと改良】2022年度版

2025年度版はあるふぁー版🤔？

※文字の中にカンマ区切りがあるのには対応してません?

"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());
})();

1310番目の投稿です／511 回表示されています．

中の人🏠️

AIによるおすすめ記事

著者名 @taoka_toshiaki

※この記事は著者が30代後半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2018年11月13 04:21日

最近よく読まれている記事（過去3ヶ月）

1.さくらのAI Engine（API）をPHP言語で叩いてみてないコード（たぶん動く）

2.映画、8番出口を観ました.#津波を連想する所があります.そこだけ注意かな.

3.映画、ジュラシックワールド復活の大地を観てきました.生存者と生存率.

4.HTMLをMarkdownに変換する方法、PHP言語編

5.映画、ひゃくえむを観てきました.もはや人生に

コメントは受け付けていません。

タグ

ajax, CSV, https, javascript, jquery, zipcomtooldemo, zipcomtooldemoindexphp, アクセス, カンマ, コード, こちら, サンプル, テキストファイル, デモ, ファイル, ページ, 下記, 使用, 区切り, 対応, 年度, 改良, 文字, 方法, 記述, 試し, 追記,