时间戳

首页 > 解决方案 > 我无法在屏幕上打印列表

javascript - 我无法在屏幕上打印列表

问题描述

我想将我的 json 数据列为复选框列表。我写了这段代码。我是这样打印的。我不知道我在哪里做错了。我从 excel 文件中获取我的 JSON 数据。textarea 显示为 "undefined undefined" 。你能帮忙吗？

HTML 代码：

<div class="example">
  <form enctype="multipart/form-data">
    <input id="upload" type=file name="files[]">
  </form>

  <textarea 
    id="data" 
    class="form-control text-area-style" 
    rows=35 
    cols=120>
  </textarea>
</div>

JS代码：

function ExcelToJSON() {
  var list;
  document.getElementById("upload").addEventListener("change", handleFileSelect, false);
  this.parseExcel = function(file) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {
        type: "binary"
      });
      workbook.SheetNames.forEach(function(sheetName) {
          // Here is your object
          var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
          var json_object = JSON.stringify(XL_row_object);
          list = JSON.parse(json_object);
          console.log(list);
          jQuery().val(json_object);

          list.forEach(function() {
              $('#data).append(' < input name = "accesories"
                type = "checkbox"
                value = "'+list.id+'" / > '+list.name+' < br / > ');
              });
          })
      };

      reader.onerror = function(ex) {
        console.log(ex);
      };

      reader.readAsBinaryString(file);
    };

  };

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    var xl2json = new ExcelToJSON();
    xl2json.parseExcel(files[0]);
  }

标签： javascriptjsonexcel

解决方案

list.forEach(function() {
              $('#data).append(' < input name = "accesories"
                type = "checkbox"
                value = "'+list.id+'" / > '+list.name+' < br / > ');
              });
          })

list 没有属性 id 和 name （未定义），您正在迭代 list 但您没有使用迭代的 item。

list.forEach(function(item) { // <= forEach calls for every list item this function with the item as argument
              $('#data).append(' < input name = "accesories"
                type = "checkbox"
                value = "'+item.id+'" / > '+item.name+' < br / > ');
              });
          })

提示： 使用浏览器调试器中的构建对理解 JS 有很大帮助。

使用 Chrome 按 F12 并在 foreach 函数中设置断点，然后执行您的代码，它将在给定的行中断，然后您将看到范围内的所有变量。（在您的情况下，您将设置该列表是一个数组，并且没有 id 和 name 作为属性）

推荐阅读