PUT for full replacement in Rest API - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the HTTP method for full replacement using PUT.

Rest API

fetch('/api/item/1', { method: '[1]' })

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

APUT

BDELETE

CPOST

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of PUT for full replacement.

Using GET method which only retrieves data.

The PUT method is used to fully replace a resource at the specified URL.

2fill in blank

medium

Complete the code to send JSON data in a PUT request for full replacement.

Rest API

fetch('/api/item/1', {
  method: 'PUT',
  headers: { 'Content-Type': '[1]' },
  body: JSON.stringify({ name: 'New Item' })
})

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

Aapplication/json

Btext/plain

Capplication/xml

Dmultipart/form-data

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text/plain' instead of 'application/json'.

Omitting the Content-Type header.

When sending JSON data, the Content-Type header must be 'application/json'.

3fill in blank

hard

Fix the error in the PUT request code by completing the missing part.

Rest API

fetch('/api/item/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: 1, [1] })
})

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

Amethod: 'POST'

Bstatus: 200

Cheaders: { 'Accept': 'application/json' }

Dname: 'Updated Item'

Attempts:

3 left

💡 Hint

Common Mistakes

Putting method or headers inside the body object.

Omitting the updated data fields.

The body must include the full replacement data, such as the updated name.

4fill in blank

hard

Fill both blanks to create a full replacement PUT request with JSON data and proper headers.

Rest API

fetch('/api/item/2', {
  method: '[1]',
  headers: { '[2]': 'application/json' },
  body: JSON.stringify({ id: 2, name: 'Replaced Item' })
})

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

APUT

BPOST

CContent-Type

DAccept

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of PUT.

Using 'Accept' instead of 'Content-Type' for the header key.

The method must be 'PUT' and the header key for JSON data is 'Content-Type'.

5fill in blank

hard

Fill all three blanks to complete the PUT request that fully replaces a resource with JSON data and logs the response status.

Rest API

fetch('/api/item/3', {
  method: '[1]',
  headers: { '[2]': 'application/json' },
  body: JSON.stringify({ id: 3, name: 'Complete Replacement' })
})
.then(response => console.log(response.[3]))

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

APUT

BContent-Type

Cstatus

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Logging response.json instead of response.status.

Using POST method instead of PUT.

The method is 'PUT', the header key is 'Content-Type', and the response status is accessed via 'status'.