FileReaderブロブでループできない、またはマップできない

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