Response helpers (json, error) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to return a JSON response with a message.

Svelte

import { json } from '@sveltejs/kit';

export function GET() {
  return [1]({ message: 'Hello from SvelteKit!' });
}

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

Ajson

Berror

Credirect

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'error' instead of 'json' causes a runtime error.

Using 'redirect' or 'text' will not return JSON data.

The json helper creates a JSON response with the given data.

2fill in blank

medium

Complete the code to return a 404 error with a message.

Svelte

import { error } from '@sveltejs/kit';

export function GET() {
  throw [1](404, 'Not found');
}

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

Ajson

Btext

Credirect

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'json' will not throw an error but return JSON data.

Using 'redirect' or 'text' is incorrect here.

The error helper throws an HTTP error with a status code and message.

3fill in blank

hard

Fix the error in the code to correctly return a JSON response with status 201.

Svelte

import { json } from '@sveltejs/kit';

export function POST() {
  return [1]({ success: true }, { status: 201 });
}

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

Aerror

Bjson

Credirect

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'error' here throws an error instead of returning JSON.

Using 'redirect' or 'text' will not set JSON response correctly.

The json helper accepts data and an optional options object including status.

4fill in blank

hard

Fill both blanks to throw a 401 unauthorized error with a message.

Svelte

import { [1], json } from '@sveltejs/kit';

export function GET() {
  throw [2](401, 'Unauthorized access');
}

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

Aerror

Bjson

Credirect

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing or using 'json' instead of 'error' causes wrong behavior.

Using 'redirect' or 'text' is incorrect for throwing errors.

The error helper is imported and used to throw HTTP errors with status and message.

5fill in blank

hard

Fill all three blanks to return a JSON response with a custom header and status 202.

Svelte

import { json } from '@sveltejs/kit';

export function POST() {
  return [1](
    { message: 'Accepted' },
    { status: [2], headers: { 'X-Custom-Header': [3] } }
  );
}

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

Aerror

Bjson

C202

D'Accepted-Value'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'error' instead of 'json' returns an error instead of JSON.

Putting status code as a string instead of number causes issues.

Missing quotes around the header value causes syntax errors.

Use json to return JSON data with status 202 and a custom header string.

Practice

1. What is the main purpose of the json() helper in SvelteKit server endpoints?

easy

A. To parse incoming JSON requests

B. To throw an HTTP error with a message

C. To send a JSON response back to the client

D. To redirect the user to another page

Solution

1. Step 1: Understand the role of json()

   The json() helper formats data as a JSON response for the client.

2. Step 2: Differentiate from other helpers

   Unlike error(), which throws HTTP errors, json() sends data successfully.

3. Final Answer:

   To send a JSON response back to the client -> Option C

4. Quick Check:

   json() sends JSON data [OK]

Hint: json() sends data; error() throws errors [OK]

Common Mistakes:

• Confusing json() with error()
• Thinking json() parses requests
• Assuming json() redirects

2. Which of the following is the correct way to return a JSON response with a status code 200 in a SvelteKit endpoint?

easy

A. return json({ message: 'Success' }, 200);

B. return error(200, { message: 'Success' });

C. return new Response({ message: 'Success' }, 200);

D. return json({ message: 'Success' }, { status: 200 });

Solution

1. Step 1: Check json() syntax

   The json() helper takes data as first argument and an options object with status as second.

2. Step 2: Validate options object usage

   return json({ message: 'Success' }, { status: 200 }); correctly uses { status: 200 } as the second argument.

3. Final Answer:

   return json({ message: 'Success' }, { status: 200 }); -> Option D

4. Quick Check:

   json(data, { status }) syntax [OK]

Hint: json() needs options object for status [OK]

Common Mistakes:

• Passing status as a separate argument without object
• Using error() to send success responses
• Using Response constructor incorrectly

3. Consider this SvelteKit endpoint code:

import { json, error } from '@sveltejs/kit';

export function GET() {
  const data = { user: 'Alice' };
  if (!data.user) {
    throw error(404, 'User not found');
  }
  return json(data);
}

What will be the HTTP status code and response if data.user is missing?

medium

A. Status 200 with empty JSON object

B. Status 404 with message 'User not found'

C. Status 500 with server error

D. Status 200 with user data

Solution

1. Step 1: Analyze the condition

   If data.user is missing (falsy), the code throws error(404, 'User not found').

2. Step 2: Understand error() behavior

   The error() helper throws an HTTP error with the given status and message.

3. Final Answer:

   Status 404 with message 'User not found' -> Option B

4. Quick Check:

   Missing user triggers error(404) [OK]

Hint: error() throws HTTP errors with status and message [OK]

Common Mistakes:

• Assuming json() runs even if error is thrown
• Thinking error() returns JSON data
• Confusing status codes for errors

4. Identify the error in this SvelteKit endpoint code snippet:

import { json, error } from '@sveltejs/kit';

export function POST() {
  const data = { success: true };
  return error(200, 'All good');
}

medium

A. Using error() with status 200 is incorrect

B. Missing return type annotation

C. POST function must be async

D. json() should be used instead of error() to send success

Solution

1. Step 1: Check status code validity

   The error() helper requires status codes 400-599. Using 200 triggers "Non-error status code 200".

2. Step 2: Correct helper for success

   For success (status 200), use json() instead of error().

3. Final Answer:

   Using error() with status 200 is incorrect -> Option A

4. Quick Check:

   Use json() for success, error() for errors [OK]

Hint: error() is for errors, not success responses [OK]

Common Mistakes:

• Using error() with 200 status
• Not returning json() for success
• Assuming error() can send normal data

5. You want to create a SvelteKit endpoint that returns a JSON list of items but throws a 400 error if the list is empty. Which code snippet correctly implements this behavior?

hard

A. export function GET() {
const items = [];
if (items.length === 0) {
throw error(400, 'No items found');
}
return json(items);
}

B. export function GET() {
const items = [];
if (!items) {
return error(400, 'No items found');
}
return json(items);
}

C. export function GET() {
const items = [];
if (items.length === 0) {
return json({ error: 'No items found' }, { status: 400 });
}
return json(items);
}

D. export function GET() {
const items = [];
if (items.length === 0) {
throw json({ error: 'No items found' }, { status: 400 });
}
return json(items);
}

Solution

1. Step 1: Check error throwing for empty list

   export function GET() { const items = []; if (items.length === 0) { throw error(400, 'No items found'); } return json(items); } correctly throws error(400, 'No items found') when the list is empty.

2. Step 2: Validate response for non-empty list

   It returns json(items) properly when items exist.

3. Final Answer:

   export function GET() { const items = []; if (items.length === 0) { throw error(400, 'No items found'); } return json(items); } -> Option A

4. Quick Check:

   Throw error() for HTTP errors, json() for data [OK]

Hint: Throw error() for bad status, json() for good data [OK]

Common Mistakes:

• Returning error() instead of throwing it
• Using json() with error status instead of throwing error()
• Throwing json() which is invalid