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://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");
投稿者::@taoka_toshiaki
タグ
358, ajax, com, CSV, data, function, GET, https, javascript, jquery, new, null, onload, open, quot, responseText, rt, send, too, true, txt, var, xmlHttp, XMLHttpRequest, xxx, zip, アクセス, コード, こちら, サンプル, テキスト, デモ, ファイル, ページ, 下記, 他, 使用, 方法, 記述, 追記,