Example requests and responses in Rest API - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make a GET request to the API endpoint.

Rest API

fetch('[1]')
  .then(response => response.json())
  .then(data => console.log(data));

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

A'https://api.example.com/data'

B'api/data'

C'POST /data'

D'GET /data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using HTTP method strings like 'GET /data' instead of a URL.

Using relative paths without the full URL.

The correct URL for the GET request is 'https://api.example.com/data'.

2fill in blank

medium

Complete the code to send a POST request with JSON data.

Rest API

fetch('https://api.example.com/data', {
  method: '[1]',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice' })
});

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

APOST

BDELETE

CPUT

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' method when sending data.

Using 'PUT' or 'DELETE' when the task asks for POST.

To send data, the HTTP method must be 'POST'.

3fill in blank

hard

Fix the error in the code to correctly parse the JSON response.

Rest API

fetch('https://api.example.com/data')
  .then(response => response.[1]())
  .then(data => console.log(data));

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

Ablob

Btext

Cjson

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text()' which returns plain text, not JSON.

Using 'blob()' or 'formData()' which are for other data types.

The response must be parsed with json() to get the JSON data.

4fill in blank

hard

Fill both blanks to create a request that sends JSON and checks for success.

Rest API

fetch('https://api.example.com/data', {
  method: '[1]',
  headers: { 'Content-Type': '[2]' },
  body: JSON.stringify({ age: 30 })
})
.then(response => {
  if (response.ok) {
    console.log('Success');
  }
});

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

APOST

Bapplication/json

Ctext/plain

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' method with a body.

Setting Content-Type to 'text/plain' when sending JSON.

The method must be 'POST' to send data, and the content type must be 'application/json' to indicate JSON data.

5fill in blank

hard

Fill all three blanks to create a request that sends data, parses JSON response, and handles errors.

Rest API

fetch('https://api.example.com/data', {
  method: '[1]',
  headers: { 'Content-Type': '[2]' },
  body: JSON.stringify({ city: 'Paris' })
})
.then(response => {
  if (!response.ok) throw new Error('Network error');
  return response.[3]();
})
.then(data => console.log(data))
.catch(error => console.error(error));

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

APOST

Bapplication/json

Cjson

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' method with a body.

Not parsing response as JSON.

Setting wrong Content-Type header.

Use 'POST' to send data, 'application/json' as content type, and parse response with 'json()'.