Le format de fichier CSV (Comma Separated Values) est un moyen populaire d’échanger des données entre applications. Dans cette astuce rapide, nous allons apprendre comment JavaScript peut nous aider à visualiser les données d’un fichier CSV.
Création d’un fichier CSV
Pour commencer, créons un simple fichier CSV. Pour ce faire, nous allons profiter de Mockaroo, un générateur de données de test en ligne. Voici notre fichier :
Conversion d’un fichier CSV en tableau HTML
Maintenant que nous avons généré le fichier, nous sommes prêts à le parser et à construire un tableau HTML associé.
Dans un premier temps, nous allons utiliser la fonction ajax de jQuery pour récupérer les données de ce fichier :
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
En supposant que la requête AJAX soit réussie, la successFunction est exécutée. Cette fonction est chargée d’analyser les données retournées et de les transformer en un tableau HTML:
L’idée est de convertir chacune des lignes du CSV en une ligne de tableau. Avec cela à l’esprit, expliquons brièvement comment le code ci-dessus fonctionne :
- D’abord, nous utilisons une regex pour diviser la réponse AJAX, et ainsi séparer les lignes CSV.
- Puis, nous itérons à travers les lignes CSV et divisons leurs champs de données.
- Enfin, nous bouclons à travers les champs de données et créons les cellules de tableau correspondantes.
De plus, pour mieux comprendre ce code, considérez la visualisation suivante :
À ce stade, il est important de clarifier pourquoi nous avons utilisé la regex /\r?\n|\r/ pour diviser les lignes du CSV.
Comme vous le savez probablement déjà, il existe différentes représentations d’une nouvelle ligne selon les systèmes d’exploitation. Par exemple, sur les plateformes Windows, les caractères représentant une nouvelle ligne sont \r\n. Cela dit, en utilisant la regex ci-dessus, nous sommes en mesure de faire correspondre toutes ces représentations possibles.
En outre, la plupart des éditeurs de texte nous permettent de choisir le format d’une nouvelle ligne. Prenez, par exemple, Notepad++. Dans cet éditeur, nous pouvons spécifier le format souhaité pour un document en naviguant vers ce chemin :
Pour l’illustrer, considérons notre fichier. Selon le format que nous choisissons, il ressemblerait à ceci:
Ajouter des styles au tableau HTML
Avant de regarder le tableau résultant, ajoutons-lui quelques styles de base :
Voici le tableau généré :
Comment analyser un fichier CSV avec la bibliothèque Papa Parse
Dans cette section, nous allons voir comment vous pouvez utiliser la bibliothèque Papa Parse pour analyser un fichier CSV en un clin d’œil ! Papa Parse est un analyseur CSV vraiment puissant qui vous fournit beaucoup d’options de configuration, et vous pourriez l’utiliser pour des fichiers CSV vraiment volumineux également.
La bibliothèque Papa Parse est disponible sur npm, et si vous ne voulez pas utiliser npm, vous pouvez télécharger le paquet officiel Papa Parse npm depuis unpkg à la place.
Comment ça marche
L’exemple suivant démontre comment il est facile de parser une chaîne CSV.
var results = Papa.parse(data); // data is a CSV string
La variable results contient le contenu suivant.
Comme vous pouvez le voir, Results.data contient un tableau de toutes les lignes. S’il y a des erreurs pendant l’analyse syntaxique, elles seront dans Results.errors. Enfin, vous pouvez utiliser Results.meta pour accéder aux informations méta de la chaîne CSV.
D’autre part, si vous voulez analyser directement un fichier CSV local, vous pouvez passer un objet JavaScript File:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
Et vous pouvez également passer l’URL d’un fichier CSV distant:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
En dehors de l’analyse syntaxique de base, Papa Parse fournit beaucoup d’autres fonctionnalités comme :
- le streaming de gros fichiers (afin que vous puissiez les traiter ligne par ligne)
- l’analyse inverse (pour émettre du CSV à partir d’un objet JavaScript)
- l’intégration de JQuery
- et plus
Je vous encourage à explorer cette bibliothèque car elle est vraiment puissante et facile à utiliser !
Conclusion
Dans ce court article, nous avons parcouru le processus de conversion d’un fichier CSV en un tableau HTML. Bien sûr, nous aurions pu utiliser un outil web pour cette conversion, mais je pense qu’il est toujours plus stimulant de réaliser cela en écrivant son propre code.