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年度版
※文字の中にカンマ区切りがあるのには対応してません?
"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");
