記録

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. 記録

    悩ましい。

    昨日、インターネットで見てしまった事によりまた考えてしまうことにな…

  2. 記録

    iPhone7に買い替える?

    自分はiPhone7に買い替える予定ですが来年になると思います。…

  3. 記録

    フリーで出来る人と出来ない人がいる。

    フリーで出来る人と出来ない人がいる。・社交的であるか?・秀でた能…

  4. 記録

    新しい道徳:北野武(著)を読んでみた。

    新しい道徳:北野武(著)を読んでみた。感想は::納得できる所がある。…

  5. 記録

    君の名は君の名は君の名は・・・アマゾン売れ筋ランキング。{予約開始

    アマゾン売れ筋ランキングで「君の名は」が独占状態です。映画「君の名…

PAGE TOP