Accentsconagua

Analyser un fichier CSV avec JavaScript

Code
Share
Ce que vous allez créer

Le format de fichier CSV (Comma Separated Values) est un moyen répandu d’échange de données entre applications..

Dans cette astuce, 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 fichier CSV simple. Pour ce faire, nous allons tirer parti de Mockaroo, un générateur de données de test en ligne. Voici notre dossier:

Conversion d'un fichier CSV en une table HTML

Maintenant que nous avons généré le fichier, nous sommes prêts à l'analyser et à construire un tableau HTML associé..

Dans un premier temps, nous utiliserons jQuery ajax fonction pour récupérer les données de ce fichier:

 $ .ajax (url: 'csv_data.csv', dataType: 'text',). done (successFunction);

En supposant que la demande AJAX aboutisse, le successFunction est exécuté. Cette fonction est chargée d’analyser les données renvoyées et de les transformer en tableau HTML:

 function successFunction (data) var allRows = data.split (/ \ r? \ n | \ r /); var table = ''; pour (var singleRow = 0; singleRow < allRows.length; singleRow++)  if (singleRow === 0)  table += ''; table + = '';  else table + = '';  var rowCells = allRows [singleRow] .split (','); pour (var rowCell = 0; rowCell < rowCells.length; rowCell++)  if (singleRow === 0)  table += '';  else table + = '';  if (singleRow === 0) table + = ''; table + = ''; table + = '';  else table + = '';  table + = ''; table + = '
'; table + = rowCells [rowCell]; table + = ''; table + = rowCells [rowCell]; table + = '
'; $ ('body'). append (table);

L'idée est donc de convertir chacune des lignes CSV en une ligne de table. Dans cet esprit, expliquons brièvement le fonctionnement du code ci-dessus:

  • Tout d’abord, nous utilisons une expression rationnelle pour scinder la réponse AJAX et ainsi séparer les lignes CSV..
  • Ensuite, nous parcourons les lignes CSV et divisons leurs champs de données.
  • Enfin, nous parcourons les champs de données et créons les cellules de tableau correspondantes..

De plus, pour mieux comprendre ce code, considérons la visualisation suivante:

À ce stade, il est important de préciser pourquoi nous avons utilisé le / \ r? \ n | \ r / regex pour diviser les lignes 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 l'expression rationnelle ci-dessus, nous sommes en mesure de faire correspondre toutes les représentations possibles..

De plus, 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 allant sur ce chemin:

Pour illustrer cela, considérons notre fichier. Selon le format que nous choisissons, cela ressemblerait à ceci:

Ajout de styles à la table HTML

Avant d'examiner le tableau résultant, ajoutons quelques styles de base:

 table margin: 0 auto; text-align: center; effondrement de la bordure: effondrement; bordure: 1px solide # d4d4d4;  tr: nième enfant (pair) background: # d4d4d4;  th, td padding: 10px 30px;  th border-bottom: 1px solid # d4d4d4;

Voici le tableau généré:

Conclusion

Dans ce court article, nous avons suivi 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 difficile d'y parvenir en écrivant votre propre code..

Code
×