Utilisation d'un fichier CSV

L'utilisation de fichier CSV est très courante, mais pose souvent beaucoup de problèmes. Bizarement, je n'ai pas trouvé de projets pour les utiliser directement en JavaScript.

J'ai donc écris csv.js, un ensemble de function JavaScript pour manipuler un fichier CSV dirrectement dans la page HTML.

Lecture du fichier

La première chose à faire est de lire le fichier et de le transformer en quelque chose de plus utilisable en JavaScript. Pour lire le fichier on utilise un simple $.get de JQuery. Ensuite on utilise la fonction CSVToArray(data,delimiter) qui transforme une string en un tableau de tableaux.

$(document).ready( function() {
	var csv;
	$.get('base.csv',function(data) {
		csv = CSVToArray(data,";");
	});
});
				

Création d'une table

Le premier besoin est généralement d'afficher le fichier sous forme de table :

$("#unediv").html( ArrayToTable( csv );

Si l'on désire n'afficher que certaines colones on utilise :

$("#unediv").html( ArrayToTable( csv,"2,3,6" ); // colones 2,3 et 6 uniquement

Formulaire

Ensuite, on a très vite besoin d'éditer une ligne du fichier. J'ai donc fait une function qui remplit les champs d'un formulaire à partir d'une des lignes du CSV en prenant le nom des colones (la première ligne du fichier CSV) comme nom de champ. Il suffit donc de faire :

 ArrayToForm( csv, numero_de_la_ligne , $('#formulaire') ); 

Regardez comment est conçue cette page et les commentaires du fichier csv.js pour plus d'infos.

Fichier CSV brut

Table

Formulaire

Champ texte
Radio
Checkbox
commentaire