HTTP DELETE API Integration with Json Server

DELETE API is used to remove data from the database using an API.


Testing DELETE API using Thunder Client

Before testing, make sure JSON Server is running.

Method: DELETE

URL format:

http://localhost:3000/users/{id}

Example:

http://localhost:3000/users/5

Result:

  1. Status 200
  2. User with that ID is removed from db.json


Adding Delete Button in User List

In user-list.component.html:

<div class="user-ul">
<ul>
<li>ID: {{ user.id }}</li>
<li>Name: {{ user.name }}</li>
<li>Age: {{ user.age }}</li>
<li>Email: {{ user.email }}</li>
</ul>

<button (click)="deleteUser(user.id)">Delete</button>
</div>


Styling for Layout

In user-list.component.css:

.user-ul {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ddd;
padding: 10px;
}


Delete Function in Component

In user-list.component.ts:

deleteUser(id?: number) {
if (id) {
this.userService.deleteUser(id).subscribe(response => {
this.getUsers();
});
}
}


DELETE API in Service File

In user.service.ts:

deleteUser(id: number) {
return this.http.delete(`${this.url}/${id}`);
}

This URL becomes:

http://localhost:3000/users/ID

Same format as tested in Thunder Client.

Refreshing User List After Delete

Create a separate function for GET API:

getUsers() {
this.userService.getUsers().subscribe(data => {
this.usersData.set(data);
});
}

Call it:

  1. Inside ngOnInit()
  2. After successful delete