Question

我使用FileReader API来获取文件（最好是JSON文件），然后循环显示这种方式的信息并将其显示在页面上。我可以获取信息和控制台记录它，但每次我尝试.forEach或.map时，它都会对我大喊大叫，我做错了。有人可以指出我做错了什么吗？我已经包含了一个链接。

https://jsfiddle.net/alexmarple/c7mco54p/4/

var fileInfo = document.getElementById('file-info');
var localArr;
document.getElementById('input').addEventListener('change', function(){
  var file = this.files[0];    
  var reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function(event){
    var arr = event.target.result;
    localArr = arr;
    //console.log(arr);
    arr.forEach(function(item){
     console.log(item);
    });
  // scrub information
  // display in #file-info
 }
}, false);

Answer 1

event.target.result是一个String，而不是一个Array。您需要先JSON.parse：

reader.onload = function(event){
  var arr = JSON.parse(event.target.result);
  // ...
}

使用forEach的方式假设上传的文件包含数组。如果它是一个Object，您可以使用Object.keys来迭代其属性：

reader.onload = function(event){
  var obj = JSON.parse(event.target.result);
  Object.keys(obj).forEach(function (key) {
    var value = obj[key];
    // ...
  })
}

无法循环或映射FileReader blob

1 个答案: