Impossible de faire une boucle ou de mapper sur le blob FileReader

Question

J'utilise l'API FileReader pour récupérer un fichier (de préférence un fichier JSON), puis boucler les informations exposées de cette manière et les afficher sur la page. Je peux saisir les informations et la console, mais à chaque fois que j'essaie de .forEach ou .map, je me rends compte que je me trompe. Quelqu'un peut-il signaler ce que je fais mal? J'ai inclus un lien.

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 est une chaîne, pas un tableau. Vous devez JSON.parse d'abord:

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

La façon dont vous utilisez forEach suppose que le fichier téléchargé contient un tableau. Si c'est un objet, vous pouvez utiliser Object.keys pour itérer ses propriétés:

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