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.