Menu
CoddyTech

Query String

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

Halaman daftar sering memerlukan opsi, seperti resep mana yang akan ditampilkan, dan membuat rute baru untuk setiap opsi akan terlalu banyak.

app.get('/books', (req, res) => {
    const { author } = req.query;
    res.send(author ? 'Books by ' + author : 'All books');
});

String kueri adalah bagian URL setelah ?, dan Express menempatkannya di req.query, sebuah object. const { author } = req.query adalah bentuk singkat dari const author = req.query.author. GET /books?author=Austen menghasilkan req.query.author === 'Austen'. Tanpa ?, nilainya adalah undefined. Beberapa opsi digabungkan dengan &: /books?author=Austen&year=1813.

Parameter rute adalah bagian dari jalur dan menamai satu hal. Opsi kueri menyaring atau mengurutkan daftar, dan boleh tidak disertakan.

challenge icon

Tantangan

Mudah

Pengunjung ingin melihat hanya resep vegan, atau hanya hidangan makan malam, tanpa halaman baru untuk setiap tag.

  1. Di server.js, ubah rute /recipes. Baca opsi tag dari string query. Setiap resep di data.js memiliki list tags, seperti ['vegan', 'soup'].
  2. Jika tag diberikan, kirim hanya judul resep yang memiliki tag tersebut di tags, satu judul per baris, seperti yang dilakukan rute sekarang.
  3. Jika tidak ada tag yang diberikan, kirim semua judul, seperti sebelumnya.
  4. Jika tidak ada resep yang memiliki tag tersebut, kirim respons kosong dengan status 200.

Coba: Tekan tombol “Jalankan” dan kirim /recipes?tag=vegan. Kamu akan melihat dua baris: Tomato Soup dan Lentil Curry. Kirim /recipes?tag=dinner: Lentil Curry dan Fish & Chips. Kirim /recipes?tag=dessert: respons kosong, karena tidak ada resep yang memiliki tag tersebut. Kirim /recipes: keempat judul.

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 muncul di baris tersendiri.
app.get('/recipes', (req, res) => {
    res.type('text').send(recipes.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');
});

Semua pelajaran di Dasar-Dasar Express

Latihan sendiri: Playground Express