Tải tệp CSV vào một mảng

Question

Tôi đang phát triển một trang web trong Wordpress. Trang web cần phải có một combobox với tất cả các quận. Tôi có tập dữ liệu ở định dạng csv có một số hàng 10k cho tất cả các hạt này. Khi người dùng chọn một hạt trong menu thả xuống, tôi chỉ muốn dữ liệu hạt được chọn được hiển thị trong trang web. Đây là yêu cầu của tôi.

Trong wordpress, trang web của tôi, tôi đang bổ sung thêm file js sử dụng

<script type="text/javascript" src="http://xxx/wp  content/uploads/2014/05/countyList1.js"></script> 

và mã cho trang web thả xuống là

<select name="county" id="county" onload="setCounties();" onchange="getSelectedCountyData();"></select> 

Trong countyList1.js nộp Tôi có setCounties() và các hàm getSelectedCountyData().

Cho đến giờ tôi có thể thấy danh sách thả xuống có danh sách các hạt. Tôi không biết cách đọc tệp CSV và áp dụng bộ lọc hạt đã chọn vào danh sách này.

Tôi đã thử đối tượng FileReader và tôi có thể tải nội dung CSV trên trang web nhưng tôi không muốn người dùng chọn CSV. Tôi đã có tập dữ liệu rồi.

Tôi đang cố gắng sử dụng thư viện jquery.csv-0.71 này từ bài đăng SO How to read data From *.CSV file using javascript? nhưng tôi cần trợ giúp.

Dưới đây là đoạn code mà được gọi khi một quận được chọn

function getSelectedCountyData() { 
     cntrySel = document.getElementById('county'); 
     //selCty = countyList[cntrySel.value]; 
     handleFiles(); 
} 

function handleFiles() { 

    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "D:\Docs\Desktop\csvfile.csv", 
      dataType: "csv", 
      success: function (data) { processData(data); } 
     }); 
    }); 
} 

function processData(allText) { 
    var allTextLines = allText.split(/\r\n|\n/); 
    var headers = allTextLines[0].split(','); 
    var lines = []; 

    for (var i = 1; i < allTextLines.length; i++) { 
     var data = allTextLines[i].split(','); 
     if (data.length == headers.length) { 

      var tarr = []; 
      for (var j = 0; j < headers.length; j++) { 
       tarr.push(headers[j] + ":" + data[j]); 
      } 
      lines.push(tarr); 
     } 
    } 
    console.log(lines); 
    drawOutput(lines); 
} 

function drawOutput(lines) { 
    //Clear previous data 
    document.getElementById("output").innerHTML = ""; 
    var table = document.createElement("table"); 
    for (var i = 0; i < lines.length; i++) { 
     var row = table.insertRow(-1); 
     for (var j = 0; j < lines[i].length; j++) { 
      var firstNameCell = row.insertCell(-1); 
      firstNameCell.appendChild(document.createTextNode(lines[i][j])); 
     } 
    } 
    document.getElementById("output").appendChild(table); 
} 

Answer 1

Bạn không thể sử dụng AJAX để lấy tập tin từ máy người dùng. Đây là cách hoàn toàn sai lầm để đi về nó.

Sử dụng FileReader API:

<input type="file" id="file input"> 

js:

console.log(document.getElementById("file input").files); // list of File objects 

var file = document.getElementById("file input").files[0]; 
var reader = new FileReader(); 
content = reader.readAsText(file); 
console.log(content); 

Sau đó phân tích content như CSV. Hãy ghi nhớ rằng phân tích cú pháp của bạn hiện không đối phó với giá trị bỏ trốn trong CSV như: value1,value2,"value 3","value ""4"""

Answer 2

cao Tôi khuyên bạn nên nhìn vào plugin này:

http://github.com/evanplaice/jquery-csv/

tôi sử dụng này cho một dự án xử lý các tập tin CSV lớn và nó xử lý phân tích cú pháp một CSV thành một mảng khá tốt. Bạn có thể sử dụng điều này để gọi một tệp cục bộ mà bạn chỉ định trong mã của mình, đồng thời, do đó bạn không phụ thuộc vào tệp tải lên.

Khi bạn bao gồm các plugin trên, bạn về cơ bản có thể phân tích các CSV bằng cách sử dụng sau đây:

$.ajax({ 
    url: "pathto/filename.csv", 
    async: false, 
    success: function (csvd) { 
     data = $.csv.toArrays(csvd); 
    }, 
    dataType: "text", 
    complete: function() { 
     // call a function on complete 
    } 
}); 

Tất cả mọi thứ sau đó sẽ sống trong mảng dữ liệu cho bạn thao tác như bạn cần. Tôi có thể cung cấp thêm các ví dụ để xử lý dữ liệu mảng nếu bạn cần.

Có rất nhiều ví dụ tuyệt vời có sẵn trên trang plugin để thực hiện nhiều việc khác nhau.

Answer 3

Nếu bạn không quá lo lắng về kích thước của tệp thì bạn có thể dễ dàng lưu trữ dữ liệu dưới dạng đối tượng JS trong tệp khác và nhập nó vào tệp của bạn. Hoặc đồng bộ hoặc không đồng bộ bằng cú pháp <script src="countries.js" async></script>. Lưu trên bạn cần nhập tệp và phân tích cú pháp.

Tuy nhiên, tôi có thể thấy lý do tại sao bạn không muốn viết lại 10.000 mục, vì vậy đây là một đối tượng cơ bản được phân tích cú pháp csv mà tôi đã viết.

function requestCSV(f,c){return new CSVAJAX(f,c);}; 
function CSVAJAX(filepath,callback) 
{ 
    this.request = new XMLHttpRequest(); 
    this.request.timeout = 10000; 
    this.request.open("GET", filepath, true); 
    this.request.parent = this; 
    this.callback = callback; 
    this.request.onload = function() 
    { 
     var d = this.response.split('\n'); /*1st separator*/ 
     var i = d.length; 
     while(i--) 
     { 
      if(d[i] !== "") 
       d[i] = d[i].split(','); /*2nd separator*/ 
      else 
       d.splice(i,1); 
     } 
     this.parent.response = d; 
     if(typeof this.parent.callback !== "undefined") 
      this.parent.callback(d); 
    }; 
    this.request.send(); 
}; 

Loại nào có thể được sử dụng như thế này;

var foo = requestCSV("csvfile.csv",drawlines(lines)); 

Tham số đầu tiên là tệp, liên quan đến vị trí tệp html của bạn trong trường hợp này. Tham số thứ hai là một hàm gọi lại tùy chọn chạy khi tệp đã được tải hoàn toàn.

Nếu tệp của bạn có dấu phẩy không tách thì nó sẽ không tiếp tục với điều này, vì nó chỉ tạo mảng 2d bằng cách cắt tại trả về và dấu phẩy. Bạn có thể muốn xem xét regexp nếu bạn cần chức năng đó.

//THIS works 

"1234","ABCD" \n 
"!@£$" \n 

//Gives you 
[ 
[ 
    1234, 
    'ABCD' 
], 
[ 
    '!@£$' 
] 
] 

//This DOESN'T! 

"12,34","AB,CD" \n 
"!@,£$" \n 

//Gives you 

[ 
[ 
    '"12', 
    '34"', 
    '"AB', 
    'CD' 
] 
[ 
    '"!@', 
    '£$' 
] 
] 

Nếu bạn không quen với phương pháp OO; chúng tạo một đối tượng mới (như một số, chuỗi, mảng) với các hàm và biến cục bộ của riêng chúng thông qua hàm 'hàm tạo'. Rất tiện dụng trong các tình huống nhất định. Chức năng này có thể được sử dụng để tải 10 tệp khác nhau với các lần gọi lại khác nhau cùng một lúc (tùy thuộc vào cấp độ của bạn về tình yêu csv!)

Answer 4

Đây là những gì tôi đã sử dụng để sử dụng tệp csv vào một mảng. Không thể có được câu trả lời ở trên để làm việc, nhưng điều này làm việc cho tôi.

$(document).ready(function() { 
    "use strict"; 
    $.ajax({ 
     type: "GET", 
     url: "../files/icd10List.csv", 
     dataType: "text", 
     success: function(data) {processData(data);} 
    }); 
}); 

function processData(icd10Codes) { 
    "use strict"; 
    var input = $.csv.toArrays(icd10Codes); 
    $("#test").append(input); 
} 

Đã sử dụng plugin jQuery-CSV được liên kết ở trên.