使用jQuery來搜索.CSV文件

Question

我完全不熟悉jQuery，因此對任何明顯的錯誤都表示歉意。

我有一個佈局爲標題和數據的.CSV文件：

訂單號，庫存狀態，數量，評論，日期 1234567，庫存，15，所有的紅，15/08/2012 1234568，缺貨，203，與鄰居保持聯繫，21/08/2012 1234569，訂單中，20，鉻飾面，17/08/2012 1234570，其他，140，木製服裝，01/09/2012

我有一個帶有4個按鈕的HTML頁面（對應庫存狀態）：

In Sto CK， 缺貨， 在訂貨物， 其他的，

我所試圖做的是，當我點擊上面的一個，我的代碼消失了，搜索匹配庫存狀態欄，並返回所有記錄訂單號，數量和評論。

到目前爲止的代碼：

var allText =[]; 
var allTextLines = []; 
var Lines = []; 
var txtFile = new XMLHttpRequest(); 

txtFile.open("GET", "file://C:/data.txt", true); 
txtFile.onreadystatechange = function() 
{ 
allText = txtFile.responseText; 
allTextLines = allText.split(/\r\n|\n/); 
}; 

// On opening the site, show the loading icon and GIF. 
$(document).ready(function() { 
$("#Outline").hide(); 
$("#loadingTable").delay(1000).hide(0); 
$.ajax({ 
    type: "GET", 
    url: "data.txt", 
    dataType: "text", 
    success: function (data) { processData(data); }  
}) 
alert("0.2") 
}); 

function showSLAMenus() { 
$("#Outline").show(); 
}; 

$("#OutOfStock").click(function() { 
alert("OutOfStock search") 
// returns Order Number, Quantity and Comments for items Out of Stock 
}); 

$("#InStock").click(function() { 
alert("InStock search") 
// returns Order Number, Quantity and Comments for items In Stock 
}); 

$("#Other").click(function() { 
alert("Other search") 
// returns Order Number, Quantity and Comments for items Other 
}); 

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

for (var i=0; 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); 
    } 
} 
alert(lines); 
} 

我的第二次嘗試：

// On opening the site, show the loading icon and GIF. 
$(document).ready(function() { 
$("#Outline").hide(); 
$("#loadingTable").delay(1000).hide(0); 
var data = []; // Empty array in global scope where we will store your data 

// Your ajax call to get the data and store it in the var above 
$.ajax({ 
    type: "GET", 
    url: "data.txt", 
    dataType: "text", 
    success: function (data) { processData(data); } 
}) 
}); 

function showSLAMenus() { 
$("#Outline").show(); 
}; 

setTimeout(showSLAMenus, 1001); 

$("#Other").click(function() { 
alert("Other1") 
// An example search call 
var output = searchData(data, "Other"); 

alert("Other2") 

// Dump out the results of our search 
for (var i in output) { 
    $("div#output").html(output[i] + "<br>"); 
} 
}); 

// Main function to process the data into an array 
function processData(allText) { 
var allTextLines = allText.split(/\r\n|\n/); 
var headers = allTextLines[0].split(','); 
var lines = []; 

for (var i = 0; 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); 
    } 
    //alert(lines); 
} 
return lines; // Returns the data you need, to be stored in our variable 
} 

// A search function using the jQuery inArray method 
// - matches the data position in the array and returns a new array of matched data 
function searchData(data, search) { 
alert("searchData Called") 
// Create a temp array to store the found data 
var tempArray = []; 

// Loop through the data to see if each array has the search term we need 
for (i = 0; i < data.length; i++) { 
    var pos = $.inArray(search, data[i]); 

    // Add found data to the array 
    if (pos !== -1) { 
     tempArray.push(data[i]); 
    } 
} 

// Return the array of matched data 
return tempArray; 
} 

您好，感謝。你在jsFiddle中的代碼似乎正在工作。然而，看着我的代碼，點擊另一個按鈕則顯示

alert("Other1") 
// An example search call 
var output = searchData(data, "Other"); 
alert("Other2") 

警告其他1時，但它不能稱之爲searchData我相信。

我是否需要還有

txtFile.open("GET", "file://C:/data.txt", true); 
txtFile.onreadystatechange = function() 
{ 
    allText = txtFile.responseText; 
    allTextLines = allText.split(/\r\n|\n/); 
}; 

在我的代碼???

謝謝。

Answer 1

你快到了。最好的辦法是使用jQuery $.inArray方法將數組中的行與您之後的數據進行匹配。您只需要一個搜索函數，它將您之後的數據作爲新數組返回。這裏有一個例子 - 編輯：http://jsfiddle.net/gNTWk/1/

這是如何影響你的代碼？以下補充：

$(document).ready(function() { 

    var data = []; // Empty array in global scope where we will store your data 

    // Your ajax call to get the data and store it in the var above 
    $.ajax({ 
     type: "GET", 
     url: "data.txt", 
     dataType: "text", 
     success: function(data){ 
      data = processData(data); 
     }  
    }); 

    // Your main function to process the data into an array 
    function processData(allText) { 
     alert("1") 
     var allTextLines = allText.split(/\r\n|\n/); 
     var headers = allTextLines[0].split(','); 
     var lines = []; 

     for (var i=0; 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); 
      } 
     } 
     return lines; // Returns the data you need, to be stored in our variable 
    } 


    // A search function using the jQuery inArray method 
    // - matches the data position in the array and returns a new array of matched data 
    function searchData(data, search){ 
     // Create a temp array to store the found data 
     var tempArray = []; 

     // Loop through the data to see if each array has the search term we need 
     for(i=0; i<data.length; i++){ 
      var pos = $.inArray(search, data[i]); 

      // Add found data to the array 
      if(pos !== -1){ 
       tempArray.push(data[i]); 
      } 
     } 

     // Return the array of matched data 
     return tempArray; 
    } 


    // An example search call 
    var output = searchData(data, "Other"); 

    // EDITED OUTPUT LOOP  
    for(i=0; i<output.length; i++){ 
     $("div#output").append(output[i] + "<br>"); 
    } 

}); 

編輯： 道歉的searchData功能很好。這只是輸出循環錯誤。上面的代碼應該現在工作正常。編輯jsfiddle：http://jsfiddle.net/gNTWk/1/