JSONレスポンス

CoddyのNode.jsジャーニー「Expressの基礎」セクションの一部。レッスン 6/23。

サーバーを呼び出すプログラムには、文ではなく、読み取れるデータが必要です。

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

JSONはオブジェクトや配列を表すテキスト形式です。res.json(value)は値をJSONに変換し、Content-Typeヘッダーをapplication/jsonに設定します。ヘッダーとはレスポンスとともに送信される名前付きの行で、このヘッダーは後に続く本文の種類を示します。クライアントは{"city":"Oslo","temp":4,"rain":true}を受け取り、tempを数値として読み取ります。

文字列を指定したres.sendはtext/htmlを送信するため、プログラムはその内容を解析しなければなりません。プログラム向けのルートは通常/apiで始まるため、ページとデータが同じパスを共有することはありません。

チャレンジ

簡単

スマートフォンアプリのようなプログラムがRecipe Boxのデータを読み取るには、読み取り可能な形式で提供する必要があります。ページの隣にJSON APIを追加しましょう。

server.jsで、/api/recipesのルートを追加します。recipes配列全体をJSONとして送信します。
/api/recipes/:idのルートを追加します。/recipes/:idと同じ方法でレシピを検索し、タイトルだけでなく、レシピオブジェクト全体をJSONとして送信します。レシピ2の場合は、"id": 2、"title": "Pancakes"、"tags": ["breakfast", "sweet"]とその servings を含むオブジェクトです。
そのIDのレシピがない場合は、ステータス404を返します。ページと同じように、No such recipeというテキストを送信できます。

試してみましょう：「実行」を押して、/api/recipesを送信します。Tomato Soupから始まる4つのレシピの一覧が表示されます。/api/recipes/2を送信すると、Pancakesのオブジェクトが表示されます。/api/recipes/99を送信すると、ステータス404が返されます。「Headers」タブでは、/api/recipesのContent-Typeはapplication/jsonです。次に/aboutを送信します。文字列を指定したres.sendはページを送信するため、そのContent-Typeはtext/htmlです。

自分で試してみよう

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

const app = express();

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

// type('text') はプレーンテキストを送信するため、各タイトルがそれぞれ別の行に表示されます。
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');
});