5. Parser nos données avec un Middleware

Bon, pour le moment nous avons fait chou blanc avec notre point de terminaison d’ajout des pokémons. Nous sommes toujours bloqués car nous ne voyons pas comment récupérer des données au format JSON depuis notre API Rest.

En fait, il existe deux opérations majeures à connaître lorsque nous utilisons le format JSON :

  • Premièrement, on peut parser une chaîne de caractère, afin obtenir du JSON. C’est possible grâce à la méthode native du navigateur JSON.parse(string), que vous pouvez utiliser partout dans votre code, sans rien avoir à importer !
  • Deuxièmement, on peut « stringifier » un JSON, afin d’obtenir une chaîne de caractère. C’est un peu l’opération contraire du parsage. Cela donnera JSON.stringify(json) dans votre code.

Concrètement, on pourra effectuer les opérations suivantes :

// 1. On reçoit des données sous la forme de chaîne de caractères :

const userString = '{"name": "John", "age": 33}'
 
// 2. On "parse" la chaîne de caractères afin d'obtenir du JSON :

const userJson = JSON.parse(userString)
 
// 3. On peut ensuite interagir avec le JSON comme n'importe quel objet JavaScript :

console.log(userJson) // {name: "John", age: 33}
console.log(userJson.name) // John
console.log(userJson.age) // 33
 
// 4. Pour obtenir les données "inverses", que l'on devra retourner au client,
//    on utilise la méthode JSON.stringify :

console.log(JSON.stringify(userJson)); // {"name":"John","age":33}

Il faut donc bien que nous retenions la différence entre les deux éléments suivants :

// Chaîne de caractères transitant par le protocole HTTP
'{"name": "John", "age": 33}'
 
// Format JSON
{"name":"John","age":33}

La différence est subtile, mais elle a tout de même de lourde conséquence, puisque la même opération peut fonctionner avec le format JSON, mais pas avec la chaîne de caractères :

const userString = '{"name": "John", "age": 33}'
const userJSON = {"name":"John","age":33}
 
console.log(userJSON.age) // Affiche 33, aucun soucis !
console.log(userString.age) // Affiche "undefined" !

Et oui, c’est normal si on prend deux minutes pour réfléchir à ce code.

Une chaîne de caractère en JavaScript n’a pas de propriété « age », alors que pour un JSON, c’est tout à fait possible ! 🙂

Ouf, on vient enfin de comprendre notre erreur précédente avec Chenipan.

Il faut donc que nous « parsons » les données entrantes dans notre API Rest, afin de récupérer directement des données au format JSON.

Pour cela, pas de panique, cela va être plutôt simple à mettre en place sur tous les points de terminaisons de notre API Rest grâce à un Middleware nommé body parser.

Commençons donc par installer ce Middleware, en exécutant la commande suivante :

npm install body-parser --save

Ensuite, nous pouvons utiliser ce Middleware dans notre application en l’important, dans le point d’entrée app.js :

const express = require('express')
const morgan = require('morgan')
const favicon = require('serve-favicon');
const bodyParser = require('body-parser');
const pokemons = require('./mock-pokemon.js');
const { success } = require('./helper.js');
 
const app = express()
const port = 3000
 
app
.use(favicon(__dirname + '/favicon.ico'))
.use(morgan('dev'))
.use(bodyParser.json())
 
app.get('/', (req, res) => res.send('Hello, Express! <img draggable="false" role="img" class="emoji" alt="👋" src="https://s.w.org/images/core/emoji/13.0.0/svg/1f44b.svg">'))
 
// ...

Et… c’est tout !

Express va prendre en compte notre nouveau Middleware, et s’occuper de tout le reste pour nous. 👍

En seulement deux lignes de code, on a donc parser toutes les données entrantes vers notre API Rest. Vous pouvez donc retenter d’exécuter la requête précédente d’ajout d’un pokémon depuis Insomnia :

On dirait que vous venez de réussir à ajouter un nouveau pokémon à votre application !

Eh bien, ça y est.

Il semble que vous venez d’ajouter un nouveau pokémon à votre API Rest. Bravo !

D’ailleurs, pour en être tout à fait certain, je vous invite à exécuter à nouveau la requête permettant d’afficher la liste de tous les pokémons :

Un petit nouveau a fait son apparition dans le pokédex.

Vous pourrez constater par vous-même que notre nouveau pokémon a bien été ajouté à la liste, ce qui fait que nous avons maintenant 13 pokémons dans notre pokédex au lieu de 12.

La famille s’agrandit on dirait…