无法在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]; 
    // ... 
    }) 
}