Forms and mutations in Deno - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to handle form submission in a Deno Fresh handler.

Deno

export const handler = async (req) => {
  if (req.method === '[1]') {
    const formData = await req.formData();
    const name = formData.get('name');
    return new Response(`Hello, ${name}!`);
  }
  return new Response('Method Not Allowed', { status: 405 });
};

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

APOST

BGET

CPUT

DDELETE

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST for form data submission.

Not checking the request method before processing form data.

Form submissions usually use the POST method to send data to the server.

2fill in blank

medium

Complete the code to extract a field named 'email' from the form data in a Deno Fresh handler.

Deno

const formData = await req.formData();
const email = formData.[1]('email');

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

Afind

Bfetch

Cget

Dquery

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods like fetch or find which do not exist on FormData.

Trying to access form fields as properties instead of using get().

The formData.get() method retrieves the value of a form field by its name.

3fill in blank

hard

Fix the error in the code to correctly parse JSON data from a POST request in Deno.

Deno

export const handler = async (req) => {
  if (req.method === 'POST') {
    const data = await req.[1]();
    return new Response(`Received: ${JSON.stringify(data)}`);
  }
  return new Response('Method Not Allowed', { status: 405 });
};

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

Ablob

BformData

Ctext

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using formData() when the request body is JSON.

Using text() and then manually parsing JSON.

To parse JSON from a request body, use req.json() which returns a parsed object.

4fill in blank

hard

Fill both blanks to create a form handler that reads 'username' and 'password' from form data and returns a JSON response.

Deno

export const handler = async (req) => {
  if (req.method === '[1]') {
    const formData = await req.[2]();
    const username = formData.get('username');
    const password = formData.get('password');
    return new Response(JSON.stringify({ username, password }), { headers: { 'Content-Type': 'application/json' } });
  }
  return new Response('Method Not Allowed', { status: 405 });
};

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

APOST

BGET

Cjson

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST for form submission.

Using json() instead of formData() to read form fields.

The handler must check for POST method and use req.formData() to read form fields.

5fill in blank

hard

Fill all three blanks to create a mutation handler that updates user data from JSON and returns a success message.

Deno

export const handler = async (req) => {
  if (req.method === '[1]') {
    const data = await req.[2]();
    const userId = data.[3];
    // Imagine updating user in database here
    return new Response(`User ${userId} updated successfully.`);
  }
  return new Response('Method Not Allowed', { status: 405 });
};

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

APUT

Bjson

Cid

DPOST

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of PUT for update operations.

Trying to get userId directly from request instead of parsed JSON.

Using formData() when expecting JSON data.

Use PUT method for updates, parse JSON with req.json(), and access the user ID with data.id.

Practice

1. What does the req.formData() method do in a Deno server context?

easy

A. It reads and returns the submitted form data from the request.

B. It sends form data back to the client.

C. It validates the form data automatically.

D. It clears the form data from the request.

Solution

1. Step 1: Understand the purpose of req.formData()

   This method is designed to extract form data sent by the client in a POST request.

2. Step 2: Identify what the method returns

   It returns a FormData object containing key-value pairs from the submitted form.

3. Final Answer:

   It reads and returns the submitted form data from the request. -> Option A

4. Quick Check:

   Form data reading = It reads and returns the submitted form data from the request. [OK]

Hint: Remember: formData() reads input, it doesn't send or clear it [OK]

Common Mistakes:

• Thinking formData() sends data to client
• Assuming formData() validates data automatically
• Believing formData() clears data from request

2. Which of the following is the correct way to asynchronously get form data from a request in Deno?

easy

A. const data = await req.formData();

B. const data = req.getFormData();

C. const data = req.formData();

D. const data = await req.getFormData();

Solution

1. Step 1: Recall the method signature for formData()

   In Deno, req.formData() returns a Promise, so it must be awaited.

2. Step 2: Identify the correct syntax

   The correct syntax uses await req.formData(); to get the form data asynchronously.

3. Final Answer:

   const data = await req.formData(); -> Option A

4. Quick Check:

   Async form data retrieval = const data = await req.formData(); [OK]

Hint: Always await formData() since it returns a Promise [OK]

Common Mistakes:

• Forgetting to use await with formData()
• Using a non-existent method getFormData()
• Calling formData() without async context

3. Given this Deno server code snippet handling a POST request:

const formData = await req.formData();
const name = formData.get('name');
return new Response(`Hello, ${name}!`);

What will be the response if the form submitted has name=Alice?

medium

A. Hello, !

B. Hello, undefined!

C. Hello, null!

D. Hello, Alice!

Solution

1. Step 1: Extract the 'name' value from formData

   The code uses formData.get('name') which returns the string 'Alice' from the submitted form.

2. Step 2: Construct the response string

   The response template string inserts 'Alice' correctly, resulting in 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option D

4. Quick Check:

   formData.get('name') = 'Alice' [OK]

Hint: formData.get('key') returns the submitted value or null if missing [OK]

Common Mistakes:

• Assuming get() returns undefined instead of null
• Not using await with formData() causing errors
• Misreading template string interpolation

4. Identify the error in this Deno code snippet handling form submission:

const formData = req.formData();
const email = formData.get('email');
return new Response(email);

medium

A. Response cannot return a string directly.

B. formData.get() is not a valid method on FormData.

C. Missing await before req.formData() causing a Promise error.

D. The variable email is not declared.

Solution

1. Step 1: Check how formData() is called

   The method req.formData() returns a Promise and must be awaited.

2. Step 2: Identify the error caused by missing await

   Without await, formData is a Promise, so calling get() on it causes a runtime error.

3. Final Answer:

   Missing await before req.formData() causing a Promise error. -> Option C

4. Quick Check:

   Always await formData() to get FormData object [OK]

Hint: Always await async calls like formData() before using results [OK]

Common Mistakes:

• Calling get() on a Promise instead of FormData
• Assuming formData() is synchronous
• Ignoring async/await syntax rules

5. You want to update a user's profile using a form in Deno. The form sends username and age. Which code correctly reads the form and updates a user object, ensuring age is stored as a number?

hard

A. const formData = await req.formData(); const user = { username: formData.get('username'), age: formData.get('age') };

B. const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) };

C. const formData = req.formData(); const user = { username: formData.get('username'), age: parseInt(formData.get('age')) };

D. const formData = await req.formData(); const user = { username: formData.get('username'), age: parseFloat(formData.get('username')) };

Solution

1. Step 1: Await formData() to get the form data object

   Using await req.formData() correctly retrieves the form data asynchronously.

2. Step 2: Convert the 'age' string to a number properly

   Using Number(formData.get('age')) converts the age string to a number safely.

3. Step 3: Check the username assignment

   Assigning username: formData.get('username') correctly stores the username string.

4. Final Answer:

   const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) }; -> Option B

5. Quick Check:

   Await + Number conversion = const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) }; [OK]

Hint: Always await formData() and convert numeric strings with Number() [OK]

Common Mistakes:

• Not awaiting formData() causing errors
• Storing age as string without conversion
• Parsing wrong field for age