Update Data Using PUT API - Edit User Example, HttpClient

PUT API is used to update existing data.

In this example, we update user name, age, and email using PUT API.


What is happening in the UI

  1. User list is shown with an Edit button
  2. Click on Edit button
  3. User is navigated to Edit User page
  4. Old data is already filled in input fields
  5. Change the values
  6. Click Update User
  7. Data gets updated and user goes back to list


Testing PUT API with Thunder Client

  1. Select method: PUT
  2. URL format:
http://localhost:3000/users/id
  1. ID is passed at the end of URL
  2. Updated data is sent in body
  3. After send, data gets updated in JSON server


Edit Button (User List HTML)

<button (click)="editUser(user.id)">Edit</button>

This sends user ID to edit page.


Getting User ID in Edit Component

let id = this.activeRouter.snapshot.paramMap.get('id');

This gets the user ID from the URL.


editUser() Function (Update Logic)

editUser(){
let name = this.name.value;
let age = this.age.value;
let email = this.email.value;
let id = this.activeRouter.snapshot.paramMap.get('id');

if(name && age && email && id){
let data = {
name: name,
age: Number(age),
email: email,
}

this.userService.userEdit(data, id).subscribe((item)=>{
this.router.navigate(['/'])
})
}
}

Meaning of the Code

  1. Get updated values from input fields
  2. Get user ID from route
  3. Check all values exist
  4. Create data object
  5. Convert age to number
  6. Call PUT API using service
  7. After success, go back to user list