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.
_10mkdir json-to-csv # Commande optionnelle pour créer un nouveau dossier vide_10cd json-to-csv # Commande optionnelle pour entrer dans le dossier créé_10npm init -y
Il faut également modifier le fichier package.json et y copier la ligne "type":"module".
Voici à quoi ressemble un fichier bien configuré :
_15{_15 "name": "json-to-csv",_15 "version": "1.0.0",_15 "description": "",_15 "main": "index.js",_15 "type": "module",_15 "scripts": {_15 "test": "echo \"Error: no test specified\" && exit 1"_15 },_15 "keywords": [],_15 "author": "",_15 "license": "ISC",_15 "dependencies": {_15 }_15}
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 :
_10npm install node-fetch
Il suffit maintenant d'importer fetch à l'intérieur du fichier server.js.
_16/* server.js */_16import fetch from 'node-fetch'; /* La librairie fetch n'est pas native à NodeJS dans la version 16.7 */_16_16export const getPosts = async () => {_16 /* Requête AJAX permettant de récupérer nos données */_16 const response = await fetch('https://jsonplaceholder.typicode.com/posts');_16 /* Nous convertissons la réponse en JSON */_16 const posts = await response.json();_16 /* Nous vérifions la récupération de notre donnée */_16 console.log(posts);_16 /* Nous renvoyons un tableau de posts */_16 return posts;_16};_16_16// N'oublions pas d'appeler la méthode pour s'assurer qu'elle fonctionne !_16getPosts();
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 :
_10npm 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.
_10import express from 'express';_10const app = express();_10_10app.get('/posts', async function (req, res) {_10 const posts = await getPosts();_10 res.send(posts);_10});_10_10app.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 :
_17/* server.js */_17import express from 'express';_17const app = express();_17_17app.get('/posts', async function (req, res) {_17 const posts = await getPosts();_17 res.send(posts);_17});_17_17app.listen(3000);_17_17export const getPosts = async () => {_17 const response = await fetch('https://jsonplaceholder.typicode.com/posts');_17_17 const posts = await response.json();_17 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 :
_10npm 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 :
_10import { stringify } from 'csv-stringify/sync';_10_10const output = stringify([_10 [ '1', '2', '3', '4' ],_10 [ 'a', 'b', 'c', 'd' ]_10]);
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.
_14app.get('/posts/csv', async function (req, res) {_14 const posts = await getPosts(); /* Récupération des données depuis notre API */_14 /* Conversion de notre object clé-valeur en ligne au format CSV */_14 const postsInCsv = stringify(posts, {_14 header: true,_14 });_14_14 /* L'en-tête Content-Type permet d'informer le navigateur du type de contenu */_14 res.setHeader('Content-Type', 'text/csv');_14 /* L'en-tête Content-Disposition permet de choisir la disposition de contenu : sous forme de page, ou sous forme de fichier */_14 res.setHeader('Content-Disposition', 'attachment; filename=posts.csv');_14_14 res.send(postsInCsv);_14});
Revenons sur le code ci-dessus :
- Nous déclarons une nouvelle route à l'URL
/posts/csvavec 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
postavec l'instructionconst posts = await getPosts() - Nous utilisons
csv-stringifypour convertir notre object clé-valeur en valeurs séparées par des virgules. - La méthode
stringifyaccepte 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-Typequi prend la valeurtext/csv - L'en-tête
Content-Dispositionpermet de changer la disposition du contenu : Accéder à la route ne va pas afficher une page, mais va à la place télécharger un fichierposts.csv - Nous pouvons ensuite renvoyer la réponse
Code complet
Voici le code complet que nous venons de développer :
_30import fetch from 'node-fetch';_30import { stringify } from 'csv-stringify/sync';_30import express from 'express';_30const app = express();_30_30app.get('/posts', async function (req, res) {_30 const posts = await getPosts();_30 res.send(posts);_30});_30_30app.get('/posts/csv', async function (req, res) {_30 const posts = await getPosts();_30_30 const postsInCsv = stringify(posts, {_30 header: true,_30 });_30_30 res.setHeader('Content-Type', 'text/csv');_30 res.setHeader('Content-Disposition', 'attachment; filename=posts.csv');_30_30 res.send(postsInCsv);_30});_30app.listen(3000);_30_30export const getPosts = async () => {_30 const response = await fetch('https://jsonplaceholder.typicode.com/posts');_30_30 const posts = await response.json();_30 return posts;_30};
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.