Question

我想从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>

仍然无法正常工作。当我点击检查时，我看到代码已生成画布，但它们不会出现在我的页面上。

Answer 1

这是您正在寻找的工作版本。如果您有任何问题，请告诉我。

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>

在画布中处理的CSV数据

1 个答案:

提供数据的工作示例