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.