Transformer des données d'API en CSV avec NodeJS

J'ai récemment eu besoin de manipuler des données CSV avec NodeJS. Dans cet article, je vous propose de convertir les données d'une API en fichier CSV. J'utilise l'exemple d'une API, mais vous pouvez utiliser des données provenant d'une base de données.

Nous utiliserons csv-stringify qui répond totalement à notre besoin.

Retrouvez le guide vidéo sur YouTube !

Pré-requis

• node.js installé

Configurer notre projet NodeJS

Nous allons générer une nouvelle application node.js afin de pouvoir installer la librairie csv-stringify. Pour ce faire, ouvrez votre terminal dans un dossier vite, et entez la commande suivante. Cela va créer un fichier package.json.

1
mkdir json-to-csv # Commande optionnelle pour créer un nouveau dossier vide
2
cd json-to-csv # Commande optionnelle pour entrer dans le dossier créé
3
npm init -y

Il faut également modifier le fichier package.json et y copier la ligne "type":"module".

Voici à quoi ressemble un fichier bien configuré :

1
{
2
	"name": "json-to-csv",
3
	"version": "1.0.0",
4
	"description": "",
5
	"main": "index.js",
6
	"type": "module",
7
	"scripts": {
8
		"test": "echo \"Error: no test specified\" && exit 1"
9
	},
10
	"keywords": [],
11
	"author": "",
12
	"license": "ISC",
13
	"dependencies": {
14
	}
15
}
16

Nous avons terminé la configuration. Nous pouvons maintenant créer un nouveau fichier server.js qui va contenir le code source. Je vous conseille de l'ouvrir avec votre éditeur de code préféré (je recommande d'utiliser VSCode).

Récupération de la donnée API

Pour pouvoir transformer notre donnée, nous devons d'abord la récupérer. J'utilise le site JSON Placeholder qui met à disposition des fausses données destinées à prototyper des projets.

Nous allons écrire une première fonction afin de récupérer une liste de posts grâce à la librairie fetch de Node. J'appelle ma fonction getPosts, elle est asynchrone et va utiliser fetch pour récupérer nos données depuis JSON Placeholder.

Si vous utilisez la version 18 de Node ou supérieur, la librairie fetch est maintenant implémentée par défaut.

J'utilise la version 16.7, et la librairie fetch n'est pas native à Node.JS. Nous devons la télécharger et l'importer dans notre application. Ouvrez votre terminal, et lancez la commande suivante :

1
npm install node-fetch

Il suffit maintenant d'importer fetch à l'intérieur du fichier server.js.

1
/* server.js */
2
import fetch from 'node-fetch'; /* La librairie fetch n'est pas native à NodeJS dans la version 16.7 */
3

4
export const getPosts = async () => {
5
    /* Requête AJAX permettant de récupérer nos données */
6
	const response = await fetch('https://jsonplaceholder.typicode.com/posts');
7
    /* Nous convertissons la réponse en JSON */
8
	const posts = await response.json();
9
    /* Nous vérifions la récupération de notre donnée */
10
    console.log(posts);
11
    /* Nous renvoyons un tableau de posts */
12
	return posts;
13
};
14

15
// N'oublions pas d'appeler la méthode pour s'assurer qu'elle fonctionne  !
16
getPosts();

Après avoir sauvegardé notre fichier, nous allons exécuter le code avec la commande node server.js. Nous devrions voir un tableau de posts dans notre terminal. Cela signifie que le projet est bien configuré !

Création de notre première route avec ExpressJS

Nous voulons pouvoir télécharger un fichier CSV depuis notre navigateur. Nous allons mettre en place plusieurs routes avec le serveur ExpressJS. Pour ce faire il suffit d'installer la librarie. Entrez la commande suivante dans votre invité de commande :

1
npm i express

Express nous permet de définir des routes pour accéder à nos données sous forme d'API. Une route est un chemin d'accès qui associe une URL et une méthode à une action spécifique de l'application. Nous allons tout de suite créer notre première route /posts en GET pour pouvoir y accéder avec notre navigateur à l'adresse localhost:3000/posts.

La documentation officielle d'Express nous donne une base de code à exploiter. Nous allons le modifier légèrement.

1
import express from 'express';
2
const app = express();
3

4
app.get('/posts', async function (req, res) {
5
	const posts = await getPosts();
6
	res.send(posts);
7
});
8

9
app.listen(3000);

Ci-dessus, nous importons la librarie express.

• Nous créons une instance d'express dans la variable app.
• Nous créons ensuite une route de type GET, à l'URL /posts
• La fonction de rappel est asynchrone. Nous devons attendre de récupérer les données depuis notre API avant de pouvoir les traiter
• Nous renvoyons la donnée telle quel sous forme de réponse avec la ligne res.send(posts);.
• Nous demandons finalement à Express d'écouter les requêtes sur le port 3000

Nous pouvons modifier notre fichier server.js en conséquence :

1
/* server.js */
2
import express from 'express';
3
const app = express();
4

5
app.get('/posts', async function (req, res) {
6
	const posts = await getPosts();
7
	res.send(posts);
8
});
9

10
app.listen(3000);
11

12
export const getPosts = async () => {
13
	const response = await fetch('https://jsonplaceholder.typicode.com/posts');
14

15
	const posts = await response.json();
16
	return posts;
17
};

Convertir la donnée en CSV

Présentation de csv-stringify

Nous venons de créer notre première route avec Express ! Mais cela ne répond pas encore à notre besoin. Nous souhaitons télécharger un fichier au format CSV correspondant à notre modèle de données. Nous avons besoin de télécharger une librairie supplémentaire pour effectuer la conversion. Nous pouvons installer csv-stringify dans notre terminal avec la commande suivante :

1
npm i csv-stringify

Une fois installé, il est important de relancer notre serveur Express. La documentation officielle de csv-stringify nous donne une base de code suffisante pour notre besoin :

1
import { stringify } from 'csv-stringify/sync';
2

3
const output = stringify([
4
  [ '1', '2', '3', '4' ],
5
  [ 'a', 'b', 'c', 'd' ]
6
]);
7

Il suffit d'importer la méthode stringify depuis csv/stringify/sync et de passer en paramètre un tableau de données. Une fois les données converties au format csv, nous devons les renvoyer à l'utilisateur grâce à une nouvelle route Express.

Création d'une nouvelle route

En dessous de notre première route, nous allons déclarer une deuxième route qui sera liée à l'URL /posts/csv.

1
app.get('/posts/csv', async function (req, res) {
2
	const posts = await getPosts(); /* Récupération des données depuis notre API */
3
    /* Conversion de notre object clé-valeur en ligne au format CSV */
4
	const postsInCsv = stringify(posts, {
5
		header: true,
6
	});
7

8
    /* L'en-tête Content-Type permet d'informer le navigateur du type de contenu  */
9
	res.setHeader('Content-Type', 'text/csv');
10
    /* L'en-tête Content-Disposition permet de choisir la disposition de contenu : sous forme de page, ou sous forme de fichier */
11
	res.setHeader('Content-Disposition', 'attachment; filename=posts.csv');
12

13
	res.send(postsInCsv);
14
});

Revenons sur le code ci-dessus :

• Nous déclarons une nouvelle route à l'URL /posts/csv avec la méthode GET
• La fonction de rappel est asynchrone
• Nous obtenons la donnée de posts depuis l'API, que nous sauvegardons dans une variable post avec l'instruction const posts = await getPosts()
• Nous utilisons csv-stringify pour convertir notre object clé-valeur en valeurs séparées par des virgules.
• La méthode stringify accepte un premier paramètre qui sera notre donnée de posts, et un tableau optionnel d'options. Nous souhaitons afficher l'en-tête dans le fichier CSV. Par défaut, l'en-tête sera les clés de notre object clé-valeur.
• Avant de renvoyer la réponse au navigateur, nous spécifions un type de contenu grâce à l'en-tête Content-Type qui prend la valeur text/csv
• L'en-tête Content-Disposition permet de changer la disposition du contenu : Accéder à la route ne va pas afficher une page, mais va à la place télécharger un fichier posts.csv
• Nous pouvons ensuite renvoyer la réponse

Code complet

Voici le code complet que nous venons de développer :

1
import fetch from 'node-fetch';
2
import { stringify } from 'csv-stringify/sync';
3
import express from 'express';
4
const app = express();
5

6
app.get('/posts', async function (req, res) {
7
	const posts = await getPosts();
8
	res.send(posts);
9
});
10

11
app.get('/posts/csv', async function (req, res) {
12
	const posts = await getPosts();
13

14
	const postsInCsv = stringify(posts, {
15
		header: true,
16
	});
17

18
	res.setHeader('Content-Type', 'text/csv');
19
	res.setHeader('Content-Disposition', 'attachment; filename=posts.csv');
20

21
	res.send(postsInCsv);
22
});
23
app.listen(3000);
24

25
export const getPosts = async () => {
26
	const response = await fetch('https://jsonplaceholder.typicode.com/posts');
27

28
	const posts = await response.json();
29
	return posts;
30
};
31

En résumé, nous avons chargé des données API avec JSONPlaceholder. Nous avons eu besoin d'installer la librairie fetch qui n'est pas native avant la version 18 de NodeJS. Nous utilisons la librairie ExpressJS pour créer des routes afin d'accéder à nos données depuis le navigateur. Nous transformons nos données JSON au format CSV avec la librairie csv-stringify, que nous renvoyons ensuite au navigateur au format CSV. Nous donnons l'instruction au navigateur de télécharger le fichier avec l'en-tête Content-Disposition.

Nous avons réussi la conversion de notre donnée d'API JSON en fichier CSV téléchargeable !

J'espère que ce guide vous a été utile. Merci aux contributeurs du projet qui proposent également d'autres librairies, permettant de manipuler davantage de fichiers CSV.