javascript - 在画布中处理的 CSV 数据
问题描述
我想从 CSV 文件中读取一些数据并创建多个包含我的 CSV 数据的画布。我希望 CSV 的每一行都有自己的画布。这是代码:
<!DOCTYPE html>
<html>
<head>
<title>BaGr (Badge Generator)</title>
</head>
<body>
<h3>Create</h3>
<div id="output">
<script>
const output = document.getElementById("output");
let objects = [];
function init() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function (){
if(this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
//parsing objects, so reusable
objects = generateObjects(this.responseText);
//once objects are parsed generate view
generateView();
}
}
xhttp.open("GET", "test.txt", true);
xhttp.send();
}
generateObjects = (responseText) => {
const lines = responseText.split("\n");
return lines.map(lineRaw=>{
const line = lineRaw.split(',');
if(line.length !== 4){
console.warn("Line error.");
return undefined;
}
return {name: line[0], surname: line[1], sex: line[2], role: line[3]};
});
}
generateView = () => {
output.innerHTML = objects.map(object=>generateCanvas(object).outerHTML).join("");
}
generateCanvas = (line) => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
let pos = 230;
for(let key in line){
if(line.hasOwnProperty(key)){
context.fillText(`${key.toUpperCase()}: `, 30, pos);
context.fillText(line[key], 150, pos);
pos += 20;
}
}
return canvas;
}
window.onload = init;
</script>
</div>
</body>
</html>
仍然无法正常工作。当我单击检查时,我看到代码生成了画布,但它们没有出现在我的页面上。
解决方案
这是您正在寻找的工作版本。如果您有任何问题,请告诉我。
const output = document.getElementById("output");
let objects = [];
function init() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//parsing objects, so reusable
objects = generateObjects(this.responseText);
//once objects are parsed generate view
generateView();
}
}
xhttp.open("GET", "test.txt", true);
xhttp.send();
}
generateObjects = (responseText) => {
const lines = responseText.split("\n");
return lines.map(lineRaw => {
const line = lineRaw.split(',');
if (line.length !== 4) {
console.warn("Line error.");
return undefined;
}
return {
name: line[0],
surname: line[1],
sex: line[2],
role: line[3]
};
});
}
generateView = () => {
objects.forEach(object => generateCanvas(object))
}
generateCanvas = (line) => {
const canvas = document.createElement("canvas");
output.appendChild(canvas);
const context = canvas.getContext("2d");
let pos = 50;
for (let key in line) {
if (line.hasOwnProperty(key)) {
context.fillText(`${key.toUpperCase()}:`, 30, pos);
context.fillText(line[key], 150, pos);
pos += 20;
}
}
}
提供数据的工作示例
const output = document.getElementById("output");
let objects = [{
"name": "Popescu",
"surname": "Bogdan",
"sex": "masculin",
"role": "student\r"
}, {
"name": "Prelipcean",
"surname": "Radu",
"sex": "masculin",
"role": "avocat\r"
}, {
"name": "Antonie",
"surname": "Ioana",
"sex": "feminin",
"role": "profesor\r"
}, {
"name": "Arhire",
"surname": "Raluca",
"sex": "feminin",
"role": "asistenta\r"
}, {
"name": "Panaite",
"surname": "Alexandru",
"sex": "masculin",
"role": "contabil\r"
}, {
"name": "Bodnar",
"surname": "Ioana",
"sex": "feminin",
"role": "vizitator"
}];
generateView = () => {
objects.forEach(object => generateCanvas(object))
}
generateCanvas = (line) => {
const canvas = document.createElement("canvas");
output.appendChild(canvas);
const context = canvas.getContext("2d");
let pos = 50;
for (let key in line) {
if (line.hasOwnProperty(key)) {
context.fillText(`${key.toUpperCase()}:`, 30, pos);
context.fillText(line[key], 150, pos);
pos += 20;
}
}
}
generateView();
<div id="output"></div>
推荐阅读
- python - cli命令的顺序执行
- python - 如何创建一个数据框,它将在 Python 中给出多个数据框的摘要?
- c++ - 第二个对话框上的 C++ MFC 按钮什么也不做
- jenkins - 使用声明性管道将 Jenkins 变量注入 Maven
- powershell - 指定函数返回类型
- python - 通过 Process.Start() 启动的进程限制为 2 GB 内存
- swift - 表达式类型是模棱两可的类错误
- java - 使用 java 中的对象列表填充 docx 表
- python - 我正在用 pyplot.arrows 绘制向量。是否有正确的方法将向量的末端与虚线连接起来?
- oracle - 在 oracle 中添加数据类型的列,该列将从另一个表的列的数据类型中派生