Le chargement des fichiers Javascript de fichier CSV dans un tableau
Je suis l'élaboration d'une page web dans WordPress. La page web doit avoir une liste déroulante avec tous les comtés. J'ai un jeu de données au format csv, qui a un peu de 10k lignes pour toutes ces comtés.
Lorsque l'utilisateur sélectionne un comté dans la liste déroulante, je veux uniquement la sélection de comté de données affichées dans la page web. C'est mon exigence.
Dans wordpress, ma page web j'ai ajouté le fichier js à l'aide de
<script type="text/javascript" src="http://xxx/wp content/uploads/2014/05/countyList1.js"></script>
et le code de la page web déroulante est
<select name="county" id="county" onload="setCounties();" onchange="getSelectedCountyData();"></select>
Dans countyList1.js fichier j'ai le setCounties() et getSelectedCountyData fonctions ().
Jusqu'à présent, je peux voir la liste déroulante avec les comtés de liste. Je ne sais pas comment faire pour lire le fichier CSV et de les appliquer sélectionnés comté de filtre de cette liste.
J'ai essayé de l'objet FileReader et je peux charger le CSV contenu sur la page web, mais je ne veux pas que l'utilisateur de sélectionner le fichier CSV. J'ai le jeu de données déjà.
Je suis en train d'utiliser cette jquery.csv-0.71 bibliothèque à partir de cette SORTE de post Comment lire les données à Partir de *.Fichier CSV à l'aide de javascript? mais j'ai besoin d'aide.
Voici le code qui est appelée lorsqu'un comté est sélectionné
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);
}
- Après l'avoir supprimé, je reçois le message d'erreur impossible de lire la propriété ajax undefined. Merci pour votre aide.
Vous devez vous connecter pour publier un commentaire.
Je recommande fortement la recherche sur ce plugin:
http://github.com/evanplaice/jquery-csv/
J'ai utilisé ce pour un projet de traitement de gros fichiers CSV et il se charge de l'analyse d'un CSV dans un tableau tout à fait bien. Vous pouvez l'utiliser pour appeler un fichier local que vous spécifiez dans votre code, également, de sorte que vous ne sont pas dépendants d'un upload de fichier.
Une fois que vous incluez le plugin ci-dessus, vous pouvez analyser le fichier CSV à l'aide de l'suivantes:
Tout va alors vivre dans le tableau données pour vous afin de les manipuler comme vous avez besoin. Je peux fournir d'autres exemples de la manipulation de la matrice de données si vous en avez besoin.
Il y a beaucoup de grands exemples disponibles sur la page du plugin pour faire une variété de choses, trop.
Si vous n'êtes pas trop inquiet au sujet de la taille du fichier, il peut être plus facile pour vous de stocker les données dans un objet JS dans un autre fichier et l'importer dans votre . Soit de manière synchrone ou asynchrone en utilisant la syntaxe
<script src="countries.js" async></script>
. Enregistre sur que vous avez besoin pour importer le fichier et l'analyse.Cependant, je peux voir pourquoi vous ne voulez réécrire 10000 entrées voici donc une base orientée objet csv analyseur j'ai écrit.
Qui peut être utilisé comme cela;
Le premier paramètre est le fichier, par rapport à la position de votre fichier html dans ce cas.
Le deuxième paramètre est facultatif fonction de rappel les pistes lorsque le fichier a été complètement chargé.
Si votre fichier a la non-séparation commmas puis il l'habitude de faire cela, car il crée des tableaux 2d en coupant des rendements et des virgules. Vous voudrez peut-être regarder dans regexp si vous avez besoin de cette fonctionnalité.
Si vous n'êtes pas utilisé pour la OO méthodes, en plus de créer un nouvel objet (comme un nombre, string, array) avec leurs propres fonctions et de variables via un constructeur de la fonction. Très pratique dans certaines situations. Cette fonction peut être utilisée pour charger 10 fichiers différents avec différents rappels tous en même temps(en fonction de votre niveau de csv amour! )
Vous ne pouvez pas utiliser AJAX pour récupérer les fichiers de l'ordinateur de l'utilisateur. Ce n'est absolument pas la voie à suivre à ce sujet.
Utiliser le FileReader API:
js:
Ensuite d'analyser
content
au format CSV. Gardez à l'esprit que votre analyseur actuellement ne traite pas avec les valeurs d'échappement en CSV comme:value1,value2,"value 3","value ""4"""
FileReader
plus. LeFileReader
est le wrapper vous obtenez pour la lecture de fichiers sur l'ordinateur de l'utilisateur.C'est ce que j'ai l'habitude d'utiliser un fichier csv dans un tableau. N'a pas pu obtenir les réponses ci-dessus fonctionne, mais cela a fonctionné pour moi.
Utilisé jQuery CSV Plug-in lié ci-dessus.
Le code d'origine fonctionne très bien pour la lecture et en séparant le fichier csv de données, mais vous avez besoin de changer le type de données à partir de csv au texte.