Why API routes serve data endpoints in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an API route that returns JSON data.

Svelte

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hello' }), {
    headers: { 'Content-Type': '[1]' }
  });
}

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

Aapplication/xml

Btext/html

Ctext/plain

Dapplication/json

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text/html' instead of 'application/json' causes the client to misinterpret the data.

Forgetting to set the Content-Type header.

The API route must set the Content-Type header to application/json to indicate it returns JSON data.

2fill in blank

medium

Complete the code to parse JSON data from a POST request in an API route.

Svelte

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

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

Ajson

BarrayBuffer

Ctext

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.text() when the body is JSON causes parsing errors.

Using request.formData() when the data is not form data.

The request.json() method parses the JSON body from the POST request.

3fill in blank

hard

Fix the error in the API route that should return a 404 status when data is not found.

Svelte

export async function GET() {
  const data = null;
  if (!data) {
    return new Response(null, { status: [1] });
  }
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' }
  });
}

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

A500

B200

C404

D301

Attempts:

3 left

💡 Hint

Common Mistakes

Returning 200 status with null data can confuse clients.

Using 500 status indicates a server error, not missing data.

The status code 404 means 'Not Found', which is appropriate when data is missing.

4fill in blank

hard

Fill both blanks to create an API route that reads a query parameter and returns it in JSON.

Svelte

export async function GET({ url }) {
  const name = url.searchParams.[1]('name');
  return new Response(JSON.stringify({ greeting: `Hello, ${name}` }), {
    headers: { 'Content-Type': '[2]' }
  });
}

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

Aget

Bhas

Capplication/json

Dtext/html

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'has' returns a boolean, not the parameter value.

Setting Content-Type to 'text/html' for JSON data is incorrect.

The get method retrieves the value of a query parameter. The Content-Type must be application/json for JSON responses.

5fill in blank

hard

Fill all three blanks to create an API route that accepts JSON, modifies it, and returns the updated JSON.

Svelte

export async function POST({ request }) {
  const data = await request.[1]();
  data.timestamp = Date.[2]();
  return new Response(JSON.stringify({ updated: data }), {
    headers: { 'Content-Type': '[3]' }
  });
}

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

Ajson

Bnow

Capplication/json

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.text() instead of request.json() causes parsing errors.

Using Date.now without parentheses returns the function, not the timestamp.

Setting Content-Type to 'text' is incorrect for JSON responses.

The json() method parses the request body as JSON. Date.now() returns the current timestamp. The response Content-Type must be application/json.