GET for reading resources in Rest API - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make a GET request to read data from the server.

Rest API

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

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

A'DELETE /api/data'

B'POST /api/data'

C'PUT /api/data'

D'/api/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Including HTTP method in the URL string

Using wrong HTTP methods like POST or DELETE

The GET request URL should be the endpoint string only, like '/api/data'.

2fill in blank

medium

Complete the code to specify the GET method explicitly in the fetch options.

Rest API

fetch('/api/items', { method: '[1]' })
  .then(response => response.json())
  .then(data => console.log(data));

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

A'POST'

B'GET'

C'PUT'

D'DELETE'

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET

Omitting the method field when needed

To read data, the HTTP method should be 'GET'.

3fill in blank

hard

Fix the error in the fetch call to correctly read JSON data from the response.

Rest API

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

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

Ajson

BformData

Cblob

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() instead of response.json()

Trying to parse JSON with blob() or formData()

Use response.json() to parse the response body as JSON.

4fill in blank

hard

Fill both blanks to create a GET request with headers to accept JSON.

Rest API

fetch('/api/products', {
  method: '[1]',
  headers: { 'Accept': '[2]' }
})
.then(response => response.json())
.then(data => console.log(data));

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

AGET

BPOST

Capplication/json

Dtext/html

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST method instead of GET

Setting Accept header to 'text/html' instead of 'application/json'

The method should be 'GET' and the Accept header should be 'application/json' to request JSON data.

5fill in blank

hard

Fill all three blanks to fetch a resource by ID and handle errors properly.

Rest API

fetch(`/api/items/[1]`)
  .then(response => {
    if (!response.[2]) throw new Error('Network error');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('[3]', error));

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

A42

Bok

CFetch failed

Dstatus

Attempts:

3 left

💡 Hint

Common Mistakes

Checking response.status instead of response.ok

Not including the resource ID in the URL

Not handling errors with catch

Use the resource ID '42' in the URL, check response.ok for success, and log 'Fetch failed' on error.