記録

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 【もうちょっと改良】


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

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

    WEB担当者様各位、サジェスト機能(予測変換)を意識している?

    サジェスト機能(予測変換)を意識しているブロガーやアファリエタ…

  2. 記録

    心が変われば

    心が変われば態度が変わる。態度が変われば習慣が変わる…

  3. 記録

    未来永劫*痛くない人。

    経営者は痛みを伴うが社員は痛みを伴わない。何社も渡り歩くと見えてく…

  4. 記録

    能力には限界があるのか?無いのか?

    能力には限界があるのか、それとも努力すれば限界を突破する事が出来るの…

  5. 記録

    HTML5のCanvasをトライ。

    会社でCanvasのことを聞かれたのだけどさっぱりだったので触って…

  6. 記録

    vue.jsとreact.jsをお触りしているのですが?。

    vue.jsとreact.jsをお触りしてみて、どちらが難しい…

PAGE TOP