Utilisation de jQuery pour rechercher le fichier .CSV

Question

Je suis complètement nouveau à jQuery alors mes excuses pour les erreurs évidentes.

Je dispose d'un fichier .csv avec des titres et des données établies comme:

Numéro de commande, l'état des stocks, quantité, commentaires, Date 1.234.567, En Stock, 15, All in Red, 15/08/2012 1234568, En rupture de stock, 203, Partir avec voisin, 21/08/2012 1234569, Sur commande, 20, Finition chromée, 17/08/2012 1234570, Autre, 140, Vêtement en bois, 01/09/2012

J'ai une page HTML avec 4 boutons (correspondent à l'état du stock):

In Sto ck, Hors Stock, Sur commande, Autre,

Ce que je suis en train de faire est lorsque je clique sur un de ce qui précède, mon code va, recherche tous les enregistrements qui correspondent à Stock colonne État et retourne Numéro de commande, quantité et commentaires

jusqu'à présent code:

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

Ma deuxième tentative:

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

Salut, merci. Votre code dans jsFiddle semble fonctionner. Cependant, en regardant mon code, en cliquant sur le bouton Autre

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

Alerte Autres1 est affiché, mais il ne parvient pas à appeler searchData je crois.

Est-ce que je dois avoir encore

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

Dans mon code ???

Merci.

Answer 1

Votre presque là. La meilleure chose à faire est d'utiliser la méthode jQuery $.inArray pour faire correspondre les lignes du tableau avec les données que vous recherchez. Vous n'aurez besoin que d'une fonction de recherche qui renvoie les données que vous recherchez en tant que nouveau tableau. Voici un exemple - EDIT: http://jsfiddle.net/gNTWk/1/

Comment cela affecte-t-il votre code? Ajouté ci-dessous:

$(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>"); 
    } 

}); 

EDIT: Excuses la fonction searchData était très bien. C'était juste la boucle de sortie qui était erronée. Au-dessus du code devrait fonctionner correctement maintenant. Edité jsfiddle: http://jsfiddle.net/gNTWk/1/