如何在Javascript中讀取數組中的csv文件？

這是我第一次使用javascript，我被困在一個問題上。我必須從csv文件中讀取，其中包含基於Alexa流量的前100萬個網站的名稱。 csv文件的大小是22.5 MB。基於網上的一些教程，我試圖這樣做：如何在Javascript中讀取數組中的csv文件？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>three.js webgl - interactive cubes</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       font-family: Monospace; 
       background-color: #f0f0f0; 
       margin: 0px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 

     <script src="./three.min.js"></script> 
     <script src="./jquery-2.1.0.min.js"></script> 
     <script src="./stats.min.js"></script> 
     <script src="./jquery.csv-0.71.js"></script> 

     <script> 
     var data = $.csv.toObjects('top_1m.csv'); 
     console.log(data); 
     </script> 

    </body> 
</html>

但我沒有得到任何輸出控制檯除了[]。這有什麼問題？也是這樣做的正確方法。基本上我需要在數組中讀取文件一次，然後使用該數組進行進一步處理。

來源

2014-02-15 rishiag

對於一，加載，解析和輸出在瀏覽器上創建一個22MB文件需要花費大量時間。這真的是你需要在客戶端下載和執行的東西嗎？ – prabindh

http://papaparse.com/ –

jquery-csv作者在這裏。瀏覽器對內存消耗有嚴格的限制。 jquery-csv同步解析數據，所以它可能無法處理22MB的數據。如果您只是在數據上運行reduce以計算統計信息，請使用PapaParse的流處理。 –

還有一個類似的問題here，你一定錯過了它。

CSV庫解析CSV字符串不是文件。它給你一個空的數組的原因是
是因爲它不是完整的CSV，即至少1個頭+ 1項。

以下是源代碼中的文檔。

LINE 673 
    /** 
    * $.csv.toObjects(csv) 
    * Converts a CSV string to a javascript object. 
    * @param {String} csv The string containing the raw CSV data. 
    * @param {Object} [options] An object containing user-defined options. 
    ... 
    **/

正如在評論中指出，處理CSV文件作爲巨大的，在瀏覽器
是不是一個明智的決定，最好在服務器上完成的。

以下是您可以打開文件並處理內容的一種方法。
注意：它只適用於Firefox。 Three.js庫扼流圈IE 8。它抱怨
關於語法錯誤（??）。你會得到一個Uncaught exception: DOMException: NETWORK_ERR
與歌劇。

而且，你會得到一個syntax error
在由於解析無效的（非）XML（即在CSV內容）的Firefox 19.0.2。

這不是最優雅的解決方案。它只是工作。

<!DOCTYPE html> 
<html lang = "en"> 
    <head> 
     <title>Testing CSV with jQuery csv.0.71</title> 
     <meta charset = "utf-8"> 
     <script src = "./three.min.js"></script> 
     <script src = "./jquery-2.1.0.min.js"></script> 
     <script src = "./stats.min.js"></script> 
     <script src = "./jquery.csv-0.71.js"></script> 
     <script> 

      function openCSVFile(CSVfileName){ 
       // create the object 
       var httpRequest = new XMLHttpRequest(); 
       httpRequest.onreadystatechange = function() { 
        processCSVContents(httpRequest); 
       } 
       // Send the request 
       httpRequest.open("POST", CSVfileName, true); 
       httpRequest.send(null); 
      } 

      function processCSVContents(httpRequest){ 
       console.log("--> here"); 
       if (httpRequest.readyState == 4){ 
        // everything is good, the response is received 
        if ((httpRequest.status == 200) 
        || (httpRequest.status == 0)){ 
         // Analys the contents using the stats library 
         // and display the results 
         CSVContents = httpRequest.responseText; 
         console.log($.csv.toObjects(CSVContents)); 
         console.log(" => Response status: " + httpRequest.status) 
         console.log(CSVContents); 
        } else { 
        alert(' => There was a problem with the request. ' 
          + httpRequest.status + httpRequest.responseText); 
        } 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <button type="button" onclick="openCSVFile('pets.csv');">Click Me!</button> 
    </body> 
</html>

的CSV文件，pets.csv包含此：

name,age,weight,species 
"fluffy",3,14,"cat" 
"vesuvius",6,23,"fish" 
"rex",5,34,"dog"

輸出：

[{ 
    name: "fluffy", 
    age: "3", 
    weight: "14", 
    species: "cat" 
}, { 
    name: "vesuvius", 
    age: "6", 
    weight: "23", 
    species: "fish" 
}, { 
    name: "rex", 
    age: "5", 
    weight: "34", 
    species: "dog" 
}]

有局部讀取文件的另一種方式，通過HTML5's File API

來源

2014-02-15 22:49:23 Segfault

如何在Javascript中讀取數組中的csv文件？

回答

相關問題