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.

Practice

1. What is the main purpose of a GET request in REST API?

easy

A. To read or fetch data from the server

B. To create new data on the server

C. To update existing data on the server

D. To delete data from the server

Solution

1. Step 1: Understand the HTTP methods

   GET is one of the HTTP methods used in REST APIs. It is specifically designed to retrieve data without changing it.

2. Step 2: Identify the purpose of GET

   GET requests fetch or read data from the server without modifying it, unlike POST, PUT, or DELETE.

3. Final Answer:

   To read or fetch data from the server -> Option A

4. Quick Check:

   GET = Read data [OK]

Hint: GET always fetches data without changing it [OK]

Common Mistakes:

• Confusing GET with POST which creates data
• Thinking GET deletes data
• Assuming GET updates data

2. Which of the following is the correct syntax for a GET request URL to fetch a user with ID 5?

easy

A. POST /users/5

B. POST /users?id=5

C. GET /users/5

D. DELETE /users/5

Solution

1. Step 1: Identify the HTTP method for reading

   GET is the correct method to read or fetch data, so the method must be GET.

2. Step 2: Check the URL path for resource

   /users/5 is the typical RESTful path to get a user with ID 5. Other options use wrong HTTP methods.

3. Final Answer:

   GET /users/5 -> Option C

4. Quick Check:

   GET + resource path = correct syntax [OK]

Hint: GET method + resource path fetches data [OK]

Common Mistakes:

• Using POST or DELETE instead of GET
• Using query parameters incorrectly
• Mixing HTTP methods and URLs

3. Given the following GET request URL: /products?category=books&limit=3, what does the server most likely return?

medium

A. All products without filtering

B. Products with category 'limit' and quantity 3

C. An error because of invalid query parameters

D. First 3 products in the books category

Solution

1. Step 1: Analyze the query parameters

   The URL has two query parameters: category=books and limit=3, which filter products by category and limit the number returned.

2. Step 2: Understand typical API behavior

   APIs commonly use 'category' to filter items and 'limit' to restrict the number of results returned.

3. Final Answer:

   First 3 products in the books category -> Option D

4. Quick Check:

   Query filters + limit = filtered limited results [OK]

Hint: Query params filter and limit results [OK]

Common Mistakes:

• Ignoring query parameters and returning all data
• Misreading 'limit' as a category
• Assuming query causes error

4. Identify the error in this GET request example: GET /users/ with body {"id": 10}

medium

A. The URL is missing the user ID

B. GET requests should not have a body

C. The HTTP method should be POST

D. The JSON body is missing a field

Solution

1. Step 1: Understand GET request rules

   GET requests do not send a body; they pass parameters via URL path or query string.

2. Step 2: Check the given request

   The request has a JSON body, which is invalid for GET and ignored by most servers.

3. Final Answer:

   GET requests should not have a body -> Option B

4. Quick Check:

   GET = no body allowed [OK]

Hint: GET requests never include a body [OK]

Common Mistakes:

• Adding body data to GET requests
• Confusing GET with POST or PUT
• Assuming URL must always include ID

5. You want to fetch a list of active users created after 2023-01-01 using a GET request. Which URL is the best choice?

hard

A. GET /users?status=active&created_after=2023-01-01

B. GET /users/active/2023-01-01

C. POST /users with body {"status":"active","created_after":"2023-01-01"}

D. GET /users {"status":"active","created_after":"2023-01-01"}

Solution

1. Step 1: Choose correct HTTP method and URL format

   GET is used to read data. Query parameters are the standard way to filter resources in GET requests.

2. Step 2: Analyze options for filtering

   GET /users?status=active&created_after=2023-01-01 uses query parameters to filter by status and creation date, which is the correct RESTful approach.

3. Final Answer:

   GET /users?status=active&created_after=2023-01-01 -> Option A

4. Quick Check:

   GET + query filters = correct usage [OK]

Hint: Use query parameters to filter GET requests [OK]

Common Mistakes:

• Using POST instead of GET for reading
• Putting filters in URL path incorrectly
• Sending body with GET request