Parse Загрузил CSV-файл, используя D3.js

Я новичок в d3.js, поэтому я знаю, что это может показаться глупым вопросом для некоторых, поэтому, пожалуйста, несите меня. Я пытаюсь разобрать файл csv, который пользователь загружает и выводит на экран в консоли. Я могу разобрать CSV-файл, когда я предоставляю абсолютный путь к файлу CSV, но когда я пытаюсь сделать то же самое с функцией загрузки файлов, я не получаю никакого вывода в консоли.Parse Загрузил CSV-файл, используя D3.js

Рабочий код Javascript ..

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); 
    });

Console Output ...

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

Новый HTML код ..

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

Модифицированный Javascript кода (не работает) ..

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); 
    })

Поскольку не было никакой официальной документации о том, как обращаться с пользователем закачанный файл CSV, я не могу понять, куда я иду Неправильно. Есть ли способ, который я могу использовать для чтения HTML5 файлов? Пожалуйста, помогите ..

источник

2016-03-18 Lucy

Проблема заключается в том, что эта строка '$ ("# csvfile") [0] .files' не дает вам содержимое файла. Сначала необходимо загрузить файл на свой сервер и вернуть URL-адрес загруженного файла. Затем вам необходимо обновить свой код на стороне клиента (javascript), чтобы использовать URL загруженного файла, а не только содержимое ввода файла. –

Нельзя ли использовать API-интерфейс HTML5 File Reader? – Lucy

Да, вы можете использовать html5 Fie Reader API –

Вы близко, но вам не нужно и не можете позвонить d3.csv на reader.result. d3.csv выполняет вызов async AJAX для извлечения CSV-файла с сервера. У вас уже есть содержимое файла и вы просто хотите разобрать, поэтому используйте d3.csv.parse.

Полный рабочий пример:

<!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>

источник

2016-03-18 18:37:28 Mark

Есть ли способ проверить, существуют ли определенные столбцы в CSV-файле внутри функции parseFile()? – Lucy

@ Lucy, см. Правки для кода выше – Mark

Parse Загрузил CSV-файл, используя D3.js

ответ

Смежные вопросы