Parse Téléchargé fichier CSV en utilisant D3.js

Je suis nouveau à d3.js, donc je sais que cela peut sembler une question idiote à certains donc s'il vous plaît ours avec moi. J'essaye d'analyser un dossier de csv qu'un utilisateur télécharge et l'imprime est sorti dans la console. Je suis capable d'analyser le fichier CSV lorsque je fournis le chemin absolu du fichier CSV mais quand j'essaye de faire la même chose avec la fonctionnalité de téléchargement de fichier, je n'obtiens aucune sortie dans la console.Parse Téléchargé fichier CSV en utilisant D3.js

var dataset = []; 
    d3.csv("sample.csv", function(data) { 
    dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; }); 
    console.log(dataset[0]); 
    console.log(dataset.length); 
    });

sortie de la console ...

["Men's Brooks Ghost 8 Running Shoe Black/High Risk Red/Silver Size 11.5 M US", "Shoes", "B00QH1KYV6", "$120.00 "] 
8

Nouveau code HTML ..

<input type="file" id="csvfile" name="uploadCSV"/> 
    <br/> 
    <button onclick="howdy()">submit</button>

modifié le code Javascript (ne fonctionne pas) ..

var myfile = $("#csvfile").prop('files')[0]; 
    var reader = new FileReader(); 

    reader.onload = function(e) { 
    var text = reader.result; 
    } 

    reader.readAsDataURL(myfile); 

    var dataset = []; 
    d3.csv(reader.result , function(data) { 
    dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; }); 
    console.log(dataset[0]); 
    console.log(dataset.length); 
    })

Comme il n'y avait pas de documentation officielle sur la façon de gérer le fichier CSV téléchargé utilisateur Je ne peux pas savoir où je vais faux .. Est-il un moyen que je peux utiliser le lecteur de fichier HTML5 ?? S'il vous plaît aider ..

Source

2016-03-18 Lucy

Le problème est que cette ligne '$ ("# csvfile") [0] .files' ne vous donne pas le contenu du fichier. Vous devez d'abord télécharger votre fichier sur votre serveur et renvoyer l'URL du fichier téléchargé. Vous devez ensuite mettre à jour votre code côté client (javascript) pour utiliser l'URL du fichier téléchargé et pas seulement le contenu de l'entrée de téléchargement du fichier. –

Ne pouvons-nous pas utiliser l'API du lecteur de fichiers HTML5 pour le faire? – Lucy

Oui, vous pouvez utiliser l'API html5 Fie Reader –

Vous êtes près mais vous ne devez pas et ne pouvez pas appeler d3.csv sur un lecteur.result. d3.csv effectue un appel AJAX asynchrone pour récupérer un fichier CSV à partir d'un serveur. Vous avez déjà le contenu du fichier et vous voulez juste analyser, donc utilisez d3.csv.parse.

exemple de travail complet:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    <input type="file" onchange="loadFile()" /> 
 

 
    <script> 
 
    var reader = new FileReader(); 
 
    
 
    function loadFile() {  
 
     var file = document.querySelector('input[type=file]').files[0];  
 
     reader.addEventListener("load", parseFile, false); 
 
     if (file) { 
 
     reader.readAsText(file); 
 
     }  
 
    } 
 
    
 
    function parseFile(){ 
 
     var doesColumnExist = false; 
 
     var data = d3.csv.parse(reader.result, function(d){ 
 
     doesColumnExist = d.hasOwnProperty("someColumn"); 
 
     return d; 
 
     }); 
 
     console.log(doesColumnExist); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

Source

2016-03-18 18:37:28 Mark

Existe-t-il un moyen de vérifier si certaines colonnes existent dans le fichier CSV à l'intérieur de la fonction parseFile() ?? – Lucy

@Lucy, voir les modifications au code ci-dessus – Mark

Parse Téléchargé fichier CSV en utilisant D3.js

Répondre

Questions connexes