Menu
CoddyTech

Réponses JSON

Fait partie de la section Les bases d’Express du Journey Node.js de Coddy. Leçon 6 sur 23.

Un programme qui appelle ton serveur a besoin de données qu’il peut lire, pas d’une phrase.

app.get('/api/weather', (req, res) => {
    res.json({ city: 'Oslo', temp: 4, rain: true });
});

JSON est un format texte pour les objets et les tableaux. res.json(value) transforme la valeur en JSON et définit l’en-tête Content-Type sur application/json ; un en-tête est une ligne nommée envoyée avec la réponse, et celui-ci indique le type de corps qui suit. Le client reçoit {"city":"Oslo","temp":4,"rain":true} et lit temp comme un nombre.

res.send avec une chaîne envoie du text/html, que le programme devrait décomposer. Les routes destinées aux programmes commencent généralement par /api, afin que les pages et les données ne partagent jamais le même chemin.

challenge icon

Défi

Facile

Les programmes, comme une application téléphonique, ont besoin des données de Recipe Box dans un format qu’ils peuvent lire. Ajoute une API JSON à côté des pages.

  1. Dans server.js, ajoute une route pour /api/recipes. Elle envoie tout le tableau recipes au format JSON.
  2. Ajoute une route pour /api/recipes/:id. Elle trouve la recette comme le fait /recipes/:id et envoie l’objet recette entier au format JSON, pas seulement son titre. Pour la recette 2, il s’agit de l’objet avec "id": 2, "title": "Pancakes", "tags": ["breakfast", "sweet"] et son nombre de portions.
  3. Lorsqu’aucune recette ne possède cet id, réponds avec le statut 404. Tu peux envoyer le texte No such recipe, comme le fait la page.

Essaie : Appuie sur « Jouer » et envoie /api/recipes. Tu devrais voir une liste de quatre recettes, qui commence par Tomato Soup. Envoie /api/recipes/2 : l’objet Pancakes. Envoie /api/recipes/99 : statut 404. Dans l’onglet Headers, /api/recipes a un Content-Type de application/json. Envoie ensuite /about : son Content-Type est text/html, car res.send avec une chaîne envoie une page.

Essayez vous-même

import express from 'express';
import { recipes } from './data.js';

const app = express();

app.get('/', (req, res) => {
    res.send('Welcome to Recipe Box');
});

// type('text') envoie du texte brut, donc chaque titre apparaît sur sa propre ligne.
app.get('/recipes', (req, res) => {
    const { tag } = req.query;
    const list = tag ? recipes.filter((recipe) => recipe.tags.includes(tag)) : recipes;
    res.type('text').send(list.map((recipe) => recipe.title).join('\n'));
});

app.get('/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).send('No such recipe');
        return;
    }
    res.send(recipe.title);
});

app.get('/about', (req, res) => {
    res.send('Recipe Box collects family recipes.');
});

app.listen(3000, () => {
    console.log('Recipe Box is running on port 3000');
});
quiz iconTestez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Toutes les leçons de Les bases d’Express

Entraînez-vous par vous-même : Playground Express