Our application to manage clients using a REST API is almost ready. The last thing that we need to learn is how to destroy data using our API.
As you can imagine, you have only two options. Either duplicate the project from the last section or keep evolving the same project.
- In the
index.htmlfile, modify thecreateLinefunction by changing the line with theDeletecolumn from:' <td>Delete</td>' +
to:
' <td><a href="#" data-id="' + data.id + '" onclick="deleteClient(this)">Delete</a></td>' +
- Create the
deleteClientfunction, which will make the delete call to the server:var deleteClient = function(element) { $.ajax({ async: false, type: "delete", url: "/api/clients/" + $(element).data("id"), contentType: "application/json" }).done(function (data) { $(element).parents("tr").hide(); }); };
Now carry out the following steps:
- First, modify the
servemethod in theClientsdispatcher by adding the following line:case Req("api" :: "clients" :: AsInt(id) :: Nil, _, DeleteRequest) => deleteClient(id) - Create a new method called
getByIdin theClientsobject, as shown in the following code:def getById(id: Int) = ClientCache.is.find(_.id == id)
- Modify the
geClientmethod from:def getClient(id: Int) = { val client = ClientCache.is.filter(_.id == id).map(_.asJson).headOption client match { case Some(c) => JsonResponse.apply(c) case _ => NotFoundResponse() } }to:
def get(id: Int) = { getById(id) match { case Some(c) => JsonResponse (c.asJson) case _ => NotFoundResponse() } } - Create a new method called
deleteClientwith the following code:def deleteClient(id: Int) = { getById(id) match { case Some(c) => { val newList = ClientCache.is.filter(_.id != c.id) ClientCache.set(newList) JsonResponse (c.asJson) } case _ => NotFoundResponse() } } - Start the application.
- Access
http://localhost:8080.
You should see a web page containing a Delete link in each line, as shown in the following screenshot:
To remove data from the server, we have used a technique similar to the one that we use to fetch a given client. This means that our API will delete data when it gets a DELETE HTTP request in this address: /api/clients/<id>. However, this is the same URL which we have used to fetch data from a single client to display in the browser. So, how does Lift know when we want to fetch or delete data?
It knows because of the HTTP request type that we have used in the case statements. To simply fetch data, we used a GetRequest, while to delete data, we used a DeleteRequest, which is a case object that defines DELETE as the HTTP method of the request.
Another thing to note, is that we have used the AsInt object to extract the client ID from the URL and pass it to the deleteClient method—just as we did earlier to fetch the data for a given client. The delete method filters the client list from the ClientCache object and creates a new list that does not contain the client that we want to delete, and stores this new list in the ClientCache object. Then, it returns the client that we have just removed from the list in the HTTP response, using the JsonResponse object. The
deleteClient method also returns an HTTP response with error code 404 if it cannot find the client that we want to delete in the list of clients.
On the client side, we created a function named deleteClient to trigger the Ajax call to delete the client. You can see that the HTTP request of the Ajax call will have the type delete, which will match against the delete endpoint. This function hides the line containing the deleted client once it gets a response from the server.