Delete a data row from table in Angular (Spring- Rest API, MongoDB)

Question

I'm developing a crud application on members in a library and I want to perform the delete operation but it does not work. Please help me to solve this issue.

Rest API

@DeleteMapping("/members")
public Member delete(@RequestBody Member member){
    repository.delete(member);
    return member;
}

As for the REST Api it's working finely, I checked it using Postman.

Http service.ts

export class Member{
constructor(
public id:string,
public name:string,
public fBook:Book,
public contact:string,
){
}
}

export class Book{
constructor(
public author:string,
public name:string,
public year:string
){
}
}

export class HttpClientService {

constructor(
private httpClient: HttpClient
) { }

private url= 'http://localhost:8080/members';

deltMem(member: Member){
return this.httpClient.delete<Member>(this.url);
}
}

deltecomp.ts

export class DeleteComponent implements OnInit {

members: Member[];

constructor(
 private httpClientService: HttpClientService
 )  { }


deleteMember(members:Member){
this.httpClientService.deltMem(members).subscribe(
  res => {
    console.log(res);
  }
)
}}

1. What doesn't work - could you clarify that a bit more? 2. Do you get any error? — Nicholas K, Jul 06 '20 at 05:13
Also, you aren't using the `member` payload when you make the api call from angular. — Nicholas K, Jul 06 '20 at 05:15

score 0 · Answer 1 · answered Jul 06 '20 at 08:05

It's not really a common and good practice to send a body content for a REST Delete method. Even it's not forbidden. I don't recommend you to use it. You can read this post for more details.

The fact that Angular don't support it as common and simple way. You can but you need extra code, see this post for more details.

If you are designing your backend architecture (you are free to adapt and design it I mean), in this case I strongly recommend you to use an id to identify the resource you would like to delete :

DELETE http://your-api-service/members/15

It's more clear, simple, human readable.

So your Spring Boot code should be :

@DeleteMapping("/members/{memberId}")
public Member delete(@PathVariable("memberId") Integer memberId){
    Member memberToDelete = repository.findById(memberId);
    // ... delete member
    return memberToDelete;
}

and your Angular code :

deleteMember(member: Member){
  return this.httpClient.delete<Member>(`${this.url}/${member.id}`);
}

Delete a data row from table in Angular (Spring- Rest API, MongoDB)

1 Answers1