javascript - 无法循环或映射到 FileReader blob

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 是字符串，不是数组。你需要先JSON.parse它:

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

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

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