記録

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

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://www.zip358.com/tool/demo13/ 【改良前】
https://www.zip358.com/tool/demo13/index2.php 【ちょっと改良】
https://www.zip358.com/tool/demo13/index3.php 【もうちょっと改良】
https://www.zip358.com/tool/demo13/index4.php 【もっと改良】


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

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

活動支援よろしくお願いします

プロセス残してSSHログアウトする方法。前のページ

さくらレンタルサーバーとXサーバーのMYSQLの規定次のページ

関連記事

  1. 記録

    みんなが大好きなマリオが何やら酷評されている。

    みんなが大好きなマリオが何やら酷評されている。12月15日にリリース…

  2. 記録

    いま2年目だとするとコロナはあと3年かもな、思いながら就職活動する人。

    いま2年目だとするとコロナはあと3年かもな、思いながら就職活動する人…

  3. 記録

    YOUTUBEプレミアムの年間契約キャンペーンはあと3日で終了する。

    YOUTUBEプレミアムの年間契約キャンペーンはあと3日で終了するの…

  4. 記録

    映画、家族はつらいよ。を観てきましたので #映画レビュー

    映画、家族はつらいよ。を観てきましたので感想なんかを残しときます。…

  5. 記録

    #映画レビュー #神様のカルテ 神様のカルテ2じゃなくて1を観たので感想を残します。

    映画、神様のカルテ2は映画館で観たのですが、実は神様のカルテは見てな…

  6. 記録

    君、オレに似てる最後の言葉だった。

    東京、出張が決まる前に先輩のひとりが去っていた。最後に自分に声をかけ…

2018年11月
 1234
567891011
12131415161718
19202122232425
2627282930  

カテゴリー

PAGE TOP