Membaca Body

Termasuk bagian Dasar-Dasar Express dalam perjalanan Node.js di Coddy. Pelajaran 15 dari 23.

Permintaan POST mengirim data di dalam bodinya, dan Express tidak membaca body kecuali kamu memintanya.

app.use(express.json());

app.post('/api/loans', (req, res) => {
    const { bookId, member } = req.body;
    res.status(201).json({ bookId, member, due: '2026-11-08' });
});

GET meminta sesuatu, sedangkan POST mengirim sesuatu untuk dibuat. express.json() adalah middleware yang membaca setiap body JSON ke dalam req.body. Tanpanya, req.body bernilai undefined. Rute yang membuat sesuatu memberikan respons 201 beserta hasil yang dibuatnya.

Periksa body sebelum kamu menyimpannya. Field yang tidak ada adalah kesalahan client, jadi berikan respons 400 dan jangan simpan apa pun.

Tantangan

Mudah

Pengunjung dapat menambahkan resep mereka sendiri. Sebuah program mengirim resep baru sebagai JSON di body permintaan POST, lalu API-mu menyimpannya.

Di server.js, tambahkan express.json() bersama baris app.use lainnya, di atas rute, agar body JSON tersedia di req.body.
Tambahkan rute untuk permintaan POST ke /api/recipes. Rute ini membaca title dan tags dari body, misalnya {"title": "Miso Soup", "tags": ["vegan", "soup"]}.
Rute ini membuat resep baru dengan id nomor berikutnya: keempat resep memiliki id 1 hingga 4, jadi resep baru pertama mendapat 5. Rute ini menyimpan title dan tags yang dikirim. Jika tidak ada tags, gunakan list kosong, [].
Rute ini menambahkan resep ke array recipes, sehingga GET /api/recipes akan menampilkannya. Lalu rute ini merespons dengan status 201 dan resep baru dalam format JSON: {"id": 5, "title": "Miso Soup", "tags": ["vegan", "soup"]}
Jika body tidak memiliki title, rute ini tidak menyimpan apa pun dan merespons dengan status 400 serta JSON berikut: {"error": "A recipe needs a title"}

Coba: Tekan Jalankan. Pilih POST di pemilih method, ketik /api/recipes sebagai path, lalu masukkan {"title": "Miso Soup", "tags": ["vegan", "soup"]} ke kotak body. Kamu seharusnya melihat status 201 dan resep dengan "id": 5. Pilih GET dan kirim /api/recipes: lima resep, dengan Miso Soup di urutan terakhir. Lalu kirim POST {"tags": ["dinner"]} ke /api/recipes: status 400 dan {"error":"A recipe needs a title"}. GET /api/recipes tetap menampilkan lima resep.

Coba sendiri

import { escapeHtml } from './html.js';
import express from 'express';
import { randomUUID } from 'node:crypto';
import { recipes } from './data.js';

const app = express();

app.use((req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next();
});

app.use((req, res, next) => {
    res.set('X-Request-Id', randomUUID());
    next();
});

app.use(express.static('public'));

app.get('/', (req, res) => {
    const items = recipes.map((r) => `<li><a href="/recipes/${r.id}">${escapeHtml(r.title)}</a></li>`);
    res.send(`<link rel="stylesheet" href="/style.css"><h1>Recipe Box</h1><ul>${items.join('')}</ul>`);
});

// type('text') mengirim teks biasa, sehingga setiap judul tampil di baris tersendiri.
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('/api/recipes', (req, res) => {
    res.json(recipes);
});

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

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

app.get('/menu', (req, res) => {
    res.redirect(301, '/recipes');
});

app.get('/menu/:id', (req, res) => {
    res.redirect(301, `/recipes/${req.params.id}`);
});

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