Route parameters in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a route parameter named 'id' in a NestJS controller method.

NestJS

  @Get(':[1]')
  getItem(@Param('id') id: string) {
    return `Item ID is ${id}`;
  }

Drag options to blanks, or click blank then click option'

Aid

Bparam

Citem

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name in the route path and in @Param decorator.

Forgetting the colon ':' before the parameter name.

The route parameter name must match the string inside the @Get decorator. Here, ':id' defines the parameter 'id'.

2fill in blank

medium

Complete the code to extract the 'userId' route parameter in the controller method.

NestJS

  @Get('user/:userId')
  getUser(@Param('[1]') userId: string) {
    return `User ID is ${userId}`;
  }

Drag options to blanks, or click blank then click option'

Aparam

Bid

CuserId

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different string inside @Param than the route parameter name.

Forgetting to include the parameter name in the route path.

The string inside @Param must match the route parameter name 'userId' to extract its value.

3fill in blank

hard

Fix the error in the code to correctly define and use a route parameter named 'postId'.

NestJS

  @Get(':[1]')
  getPost(@Param('postId') postId: string) {
    return `Post ID is ${postId}`;
  }

Drag options to blanks, or click blank then click option'

Apost

Bpid

Cid

DpostId

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatch between route parameter name and @Param string.

Using a different variable name in the method parameter than in the decorator.

The route parameter name in the @Get decorator must match the string used in @Param. Here, both should be 'postId'.

4fill in blank

hard

Fill both blanks to create a route with two parameters 'category' and 'itemId' and extract them in the method.

NestJS

  @Get(':[1]/:[2]')
  getItem(@Param('[1]') category: string, @Param('[2]') itemId: string) {
    return `Category: ${category}, Item ID: ${itemId}`;
  }

Drag options to blanks, or click blank then click option'

Acategory

Bitem

CitemId

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names in the route and @Param decorators.

Forgetting the colon ':' before route parameters.

The route parameters and the strings inside @Param must match exactly. Here, 'category' and 'itemId' are used consistently.

5fill in blank

hard

Fill all three blanks to create a route with parameters 'user', 'postId', and 'commentId' and extract them in the method.

NestJS

  @Get(':[1]/:[2]/:[3]')
  getComment(
    @Param('[1]') user: string,
    @Param('[2]') postId: string,
    @Param('[3]') commentId: string
  ) {
    return `User: ${user}, Post: ${postId}, Comment: ${commentId}`;
  }

Drag options to blanks, or click blank then click option'

Auser

BpostId

CcommentId

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up parameter names between route and @Param.

Forgetting to add colons before parameters in the route.

Each route parameter must be defined with a colon and match the string inside the corresponding @Param decorator.

Practice

1. What does the : symbol represent in a NestJS route path like @Get('users/:id')?

easy

A. It is used to comment out the route path.

B. It defines a query parameter to be passed in the URL.

C. It indicates a static part of the URL path.

D. It marks id as a dynamic route parameter to capture from the URL.

Solution

1. Step 1: Understand route path syntax

   The colon : before id in @Get('users/:id') means id is a variable part of the URL.

2. Step 2: Identify the role of dynamic parameters

   This dynamic parameter allows the route to accept different id values from the URL, making the route flexible.

3. Final Answer:

   It marks id as a dynamic route parameter to capture from the URL. -> Option D

4. Quick Check:

   Colon means dynamic parameter = A [OK]

Hint: Colon before name means dynamic URL part [OK]

Common Mistakes:

• Thinking colon means query parameter
• Confusing static and dynamic parts
• Assuming colon is for comments

2. Which of the following is the correct way to access a route parameter named userId inside a NestJS controller method?

easy

A. @Body('userId') userId: string

B. @Query('userId') userId: string

C. @Param('userId') userId: string

D. @Headers('userId') userId: string

Solution

1. Step 1: Identify decorator for route parameters

   In NestJS, @Param() decorator is used to extract route parameters from the URL.

2. Step 2: Match parameter name

   Using @Param('userId') correctly accesses the userId parameter from the route.

3. Final Answer:

   @Param('userId') userId: string -> Option C

4. Quick Check:

   @Param for route params = C [OK]

Hint: Use @Param('name') to get route parameters [OK]

Common Mistakes:

• Using @Query instead of @Param for route params
• Trying to get route params from @Body or @Headers
• Forgetting to specify parameter name in @Param

3. Given this NestJS controller method:

@Get('products/:id')
getProduct(@Param('id') id: string) {
  return `Product ID is ${id}`;
}

What will be the response when a client requests /products/42?

medium

A. "Product ID is 42"

B. "Product ID is id"

C. "Product ID is undefined"

D. 404 Not Found error

Solution

1. Step 1: Understand route parameter extraction

   The @Param('id') decorator extracts the value 42 from the URL /products/42.

2. Step 2: Check returned string

   The method returns the string with the extracted id interpolated: "Product ID is 42".

3. Final Answer:

   "Product ID is 42" -> Option A

4. Quick Check:

   Route param 'id' = 42 in output [OK]

Hint: Route param value replaces :id in URL [OK]

Common Mistakes:

• Expecting literal 'id' instead of value
• Not using @Param to get the value
• Assuming undefined if param missing

4. What is wrong with this NestJS controller method?

@Get('orders/:orderId')
getOrder(@Param() orderId: string) {
  return `Order: ${orderId}`;
}

medium

A. Missing parameter name inside @Param() decorator.

B. Route path should not have colon before orderId.

C. Method should use @Query instead of @Param.

D. Return statement syntax is invalid.

Solution

1. Step 1: Check @Param usage

   The @Param() decorator without an argument returns an object of all params, not a single string.

2. Step 2: Identify mismatch in parameter type

   The method expects orderId as a string, but @Param() without argument returns an object, causing a type mismatch.

3. Final Answer:

   Missing parameter name inside @Param() decorator. -> Option A

4. Quick Check:

   @Param needs name for single param = B [OK]

Hint: Use @Param('name') for single param, else get object [OK]

Common Mistakes:

• Omitting parameter name in @Param() when expecting string
• Confusing @Param with @Query
• Thinking colon is wrong in route path

5. You want to create a NestJS route that accepts two parameters: category and itemId. Which of the following route paths and method signatures correctly captures both parameters?

hard

A. @Get('shop/:category/:itemId')getItem(@Body('category') category: string, @Body('itemId') itemId: string)

B. @Get('shop/:category/:itemId')getItem(@Param('category') category: string, @Param('itemId') itemId: string)

C. @Get('shop/:category/:itemId')getItem(@Query('category') category: string, @Query('itemId') itemId: string)

D. @Get('shop/:category/:itemId')getItem(@Param() params: string)

Solution

1. Step 1: Verify route path with two parameters

   The path 'shop/:category/:itemId' correctly defines two dynamic route parameters.

2. Step 2: Check method parameters for correct decorators

   Using @Param('category') and @Param('itemId') extracts each parameter individually as strings.

3. Final Answer:

   @Get('shop/:category/:itemId') with getItem(@Param('category') category: string, @Param('itemId') itemId: string) -> Option B

4. Quick Check:

   Use @Param('name') for each route param = D [OK]

Hint: Use @Param('name') for each route parameter [OK]

Common Mistakes:

• Using @Param() with string instead of object
• Using @Query or @Body instead of @Param for route params
• Not matching parameter names exactly