Request parsing in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to read the JSON body from a fetch request in a SvelteKit endpoint.

Svelte

export async function POST({ request }) {
  const data = await request.[1]();
  return new Response(JSON.stringify(data));
}

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

Atext

Bblob

CformData

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.text() instead of request.json() causes you to get raw text, not parsed JSON.

Trying to access request.body directly without parsing.

Use request.json() to parse the JSON body from the request.

2fill in blank

medium

Complete the code to extract a URL search parameter named 'id' from the request URL in a SvelteKit endpoint.

Svelte

export async function GET({ url }) {
  const id = url.searchParams.[1]('id');
  return new Response(`ID is ${id}`);
}

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

Aget

Bhas

Cset

Dappend

Attempts:

3 left

💡 Hint

Common Mistakes

Using has returns a boolean, not the value.

Using set or append modifies parameters instead of reading.

The get method retrieves the value of a search parameter by name.

3fill in blank

hard

Fix the error in the code to correctly parse form data from a POST request in a SvelteKit endpoint.

Svelte

export async function POST({ request }) {
  const form = await request.[1]();
  const name = form.get('name');
  return new Response(`Name is ${name}`);
}

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

Ajson

BformData

Ctext

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.json() when the body is form data causes errors.

Using request.text() returns raw text, not parsed form data.

Use request.formData() to parse form data from the request body.

4fill in blank

hard

Fill both blanks to parse JSON from the request and return a JSON response with a message.

Svelte

export async function POST({ request }) {
  const data = await request.[1]();
  return new Response(JSON.stringify({ message: data.[2] }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

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

Ajson

Btext

Cname

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using text instead of json causes parsing errors.

Accessing a wrong property name that does not exist in the data.

Use request.json() to parse JSON, then access the name property from the parsed data.

5fill in blank

hard

Fill all three blanks to parse URL parameters and JSON body, then return a combined JSON response.

Svelte

export async function POST({ url, request }) {
  const id = url.searchParams.[1]('id');
  const data = await request.[2]();
  return new Response(JSON.stringify({ id: id, name: data.[3] }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

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

Aget

Bjson

Cname

Dhas

Attempts:

3 left

💡 Hint

Common Mistakes

Using has instead of get for URL parameters.

Using text instead of json for parsing body.

Accessing a wrong property name from the JSON data.

Use get to read the URL parameter, json to parse the request body, and access the name property from the JSON data.

Practice

1. In SvelteKit, which method is used to parse JSON data from a request object?

easy

A. request.formData()

B. request.text()

C. request.json()

D. request.body()

Solution

1. Step 1: Understand request data types

   JSON data is structured and requires parsing to convert it into usable JavaScript objects.

2. Step 2: Identify the correct parsing method

   request.json() is the built-in method to parse JSON body content from a request.

3. Final Answer:

   request.json() -> Option C

4. Quick Check:

   JSON parsing method = request.json() [OK]

Hint: Use request.json() to parse JSON bodies quickly [OK]

Common Mistakes:

• Using request.text() for JSON causes manual parsing errors
• Confusing formData() with JSON parsing
• Assuming request.body() returns parsed data

2. Which of the following is the correct way to parse form data from a request in SvelteKit?

easy

A. const data = await request.json()

B. const data = await request.formData()

C. const data = request.body()

D. const data = request.text()

Solution

1. Step 1: Identify form data parsing method

   Form data is sent as key-value pairs, often from HTML forms, and requires formData() to parse.

2. Step 2: Confirm correct syntax

   The method await request.formData() returns a FormData object representing the form fields.

3. Final Answer:

   const data = await request.formData() -> Option B

4. Quick Check:

   Form data parsing = request.formData() [OK]

Hint: Use request.formData() to get form fields easily [OK]

Common Mistakes:

• Using request.json() for form data causes errors
• Forgetting to await the formData() promise
• Trying to access request.body() directly

3. Given this SvelteKit handler code:

export async function POST({ request, url }) {
  const jsonData = await request.json();
  const searchParam = url.searchParams.get('id');
  return new Response(`ID: ${searchParam}, Name: ${jsonData.name}`);
}

What will be the response text if the request body is {"name":"Alice"} and the URL is /api?id=42?

medium

A. ID: 42, Name: Alice

B. ID: null, Name: Alice

C. ID: 42, Name: undefined

D. ID: , Name: Alice

Solution

1. Step 1: Parse JSON body

   The code uses await request.json() to get { name: 'Alice' } from the request body.

2. Step 2: Extract query parameter

   url.searchParams.get('id') reads the 'id' parameter from the URL, which is '42'.

3. Step 3: Construct response string

   The response text combines both values: "ID: 42, Name: Alice".

4. Final Answer:

   ID: 42, Name: Alice -> Option A

5. Quick Check:

   Parsed JSON and query param combined = ID: 42, Name: Alice [OK]

Hint: Remember url.searchParams.get('key') reads query strings [OK]

Common Mistakes:

• Assuming searchParams.get returns undefined instead of null
• Not awaiting request.json() causing undefined name
• Confusing query param key spacing (id vs id=)

4. What is wrong with this SvelteKit POST handler code?

export async function POST({ request }) {
  const data = request.formData();
  const username = data.get('username');
  return new Response(username);
}

medium

A. Response should be JSON, not plain text

B. Using formData() instead of json() for JSON body

C. Cannot call get() on formData object

D. Missing await before request.formData()

Solution

1. Step 1: Check formData() usage

   request.formData() returns a promise and must be awaited to get the FormData object.

2. Step 2: Identify missing await

   The code calls request.formData() without await, so data is a promise, not a FormData instance, causing an error on data.get().

3. Final Answer:

   Missing await before request.formData() -> Option D

4. Quick Check:

   Always await async parsing methods like formData() [OK]

Hint: Always await request.formData() to get the data object [OK]

Common Mistakes:

• Forgetting await leads to runtime errors
• Confusing formData() with synchronous methods
• Assuming formData() returns plain object

5. You want to handle a POST request in SvelteKit that can accept either JSON or form data. Which approach correctly parses the request body regardless of content type?

hard

A. export async function POST({ request }) {
if (request.headers.get('content-type')?.includes('application/json')) {
const data = await request.json();
return new Response(JSON.stringify(data));
} else {
const form = await request.formData();
const obj = Object.fromEntries(form.entries());
return new Response(JSON.stringify(obj));
}
}

B. export async function POST({ request }) {
const data = await request.json();
return new Response(JSON.stringify(data));
}

C. export async function POST({ request }) {
const form = await request.formData();
return new Response(JSON.stringify(form));
}

D. export async function POST({ request }) {
const text = await request.text();
return new Response(text);
}

Solution

1. Step 1: Check content-type header

   The code checks if the request content type includes 'application/json' to decide parsing method.

2. Step 2: Parse accordingly

   If JSON, it uses request.json(). Otherwise, it uses request.formData() and converts form entries to an object.

3. Step 3: Return consistent JSON response

   Both branches return JSON stringified data, handling both content types correctly.

4. Final Answer:

   Conditional parsing based on content-type header -> Option A

5. Quick Check:

   Check content-type to parse JSON or form data [OK]

Hint: Check content-type header to choose parsing method [OK]

Common Mistakes:

• Assuming all requests are JSON or form data only
• Not converting formData to object before JSON.stringify
• Ignoring content-type leads to parsing errors