Menu
CoddyTech

Tanggapan JSON

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

Program yang memanggil servermu membutuhkan data yang bisa dibacanya, bukan kalimat.

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

JSON adalah format teks untuk object dan array. res.json(value) mengubah nilai menjadi JSON dan menetapkan header Content-Type ke application/json; header adalah baris bernama yang dikirim bersama respons, dan header ini menunjukkan jenis isi yang menyusul. Client menerima {"city":"Oslo","temp":4,"rain":true} dan membaca temp sebagai angka.

res.send dengan string mengirim text/html, yang harus diurai oleh program. Rute untuk program biasanya diawali dengan /api, sehingga halaman dan data tidak pernah berbagi path.

challenge icon

Tantangan

Mudah

Program, seperti aplikasi ponsel, membutuhkan data Recipe Box dalam format yang dapat dibaca. Tambahkan API JSON di samping halaman.

  1. Di server.js, tambahkan route untuk /api/recipes. Route ini mengirim seluruh array recipes sebagai JSON.
  2. Tambahkan route untuk /api/recipes/:id. Route ini mencari resep dengan cara yang sama seperti /recipes/:id, lalu mengirim seluruh object resep sebagai JSON, bukan hanya judulnya. Untuk resep 2, object tersebut memiliki "id": 2, "title": "Pancakes", "tags": ["breakfast", "sweet"] dan jumlah porsinya.
  3. Jika tidak ada resep dengan id tersebut, kirim respons dengan status 404. Kamu bisa mengirim teks No such recipe, seperti yang dilakukan halaman tersebut.

Coba: Tekan tombol “Main” dan kirim /api/recipes. Kamu akan melihat list berisi empat resep, dimulai dengan Tomato Soup. Kirim /api/recipes/2: object Pancakes. Kirim /api/recipes/99: status 404. Di tab Headers, /api/recipes memiliki Content-Type application/json. Lalu kirim /about: Content-Type-nya adalah text/html, karena res.send dengan string mengirim halaman.

Coba sendiri

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

const app = express();

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

// type('text') mengirim teks biasa, sehingga setiap judul tampil pada 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('/about', (req, res) => {
    res.send('Recipe Box collects family recipes.');
});

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

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Dasar-Dasar Express

Latihan sendiri: Playground Express