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'.

Practice

1. What does the HTTP PUT method do when used on a REST API resource URL?

easy

A. Retrieves the resource data from the URL

B. Partially updates the resource fields at the URL

C. Fully replaces the resource at the URL with the provided data

D. Deletes the resource at the URL

Solution

1. Step 1: Understand PUT method purpose

   PUT is designed to replace the entire resource at the given URL with the data sent in the request.

2. Step 2: Compare with other methods

   Unlike PATCH which updates partially, PUT replaces fully. GET retrieves, DELETE removes.

3. Final Answer:

   Fully replaces the resource at the URL with the provided data -> Option C

4. Quick Check:

   PUT = full replacement [OK]

Hint: PUT replaces entire resource, not partial update [OK]

Common Mistakes:

• Confusing PUT with PATCH partial update
• Thinking PUT deletes resource
• Assuming PUT only retrieves data

2. Which of the following is the correct HTTP method and usage to fully replace a resource at URL /users/123 with new data in JSON format?

easy

A. POST /users/123 with JSON body

B. PUT /users/123 with JSON body

C. PATCH /users/123 with JSON body

D. GET /users/123 with JSON body

Solution

1. Step 1: Identify method for full replacement

   PUT is the HTTP method used to fully replace a resource at a specific URL.

2. Step 2: Match method with URL and body

   PUT /users/123 with JSON body replaces the user data fully. POST is for creation, PATCH partial update, GET retrieves.

3. Final Answer:

   PUT /users/123 with JSON body -> Option B

4. Quick Check:

   PUT + URL + JSON = full replace [OK]

Hint: Use PUT with URL and full JSON body to replace resource [OK]

Common Mistakes:

• Using POST instead of PUT for replacement
• Using PATCH for full replacement
• Sending body with GET request

3. Given a REST API with a user resource at /users/42 initially having data {"name": "Alice", "age": 30}, what will be the resource data after this PUT request?

PUT /users/42
{"name": "Bob"}

medium

A. {"name": "Bob"}

B. {"name": "Bob", "age": 30}

C. {"age": 30}

D. Resource deleted

Solution

1. Step 1: Understand PUT replaces entire resource

   The PUT request replaces the whole resource data with the new JSON body, removing any fields not included.

2. Step 2: Apply replacement to given data

   Original data had name and age, but PUT body only has name "Bob", so age is removed.

3. Final Answer:

   {"name": "Bob"} -> Option A

4. Quick Check:

   PUT replaces all fields, missing fields removed [OK]

Hint: PUT replaces all fields; missing fields are removed [OK]

Common Mistakes:

• Assuming PUT merges fields like PATCH
• Expecting old fields to remain if not sent
• Thinking PUT deletes resource

4. You wrote this PUT request to update a resource:

PUT /items/10
{"price": 100}

But after sending, the resource lost all other fields except price. How can you fix this to keep other fields intact?

medium

A. Use GET method instead

B. Add missing fields to the PUT JSON body

C. Send an empty body with PUT

D. Change PUT to PATCH to update partially

Solution

1. Step 1: Identify cause of lost fields

   PUT replaces the entire resource, so missing fields in body are removed.

2. Step 2: Choose method to update partially

   PATCH updates only specified fields, keeping others intact.

3. Final Answer:

   Change PUT to PATCH to update partially -> Option D

4. Quick Check:

   PATCH = partial update, keeps other fields [OK]

Hint: Use PATCH for partial update, PUT replaces all [OK]

Common Mistakes:

• Trying to fix by adding missing fields manually
• Sending empty body with PUT
• Using GET to update resource

5. You want to update a user resource at /users/77 with new data {"name": "Eve", "age": 28}. The resource may or may not exist. Which is the best approach using PUT to ensure the resource is created if missing or fully replaced if exists?

hard

A. Send a PUT request with full user data to /users/77

B. Send a POST request to /users with partial data

C. Send a PATCH request to /users/77 with partial data

D. Send a GET request to /users/77 before updating

Solution

1. Step 1: Understand PUT behavior for create or replace

   PUT can create the resource if it does not exist, or fully replace it if it does.

2. Step 2: Apply PUT with full data to target URL

   Sending PUT with full user data to /users/77 ensures creation or full replacement.

3. Final Answer:

   Send a PUT request with full user data to /users/77 -> Option A

4. Quick Check:

   PUT = create or replace resource fully [OK]

Hint: PUT creates or replaces resource at URL with full data [OK]

Common Mistakes:

• Using POST which creates new resource with new ID
• Using PATCH which only updates existing resource partially
• Using GET before update unnecessarily