Angular 4.0 http put request

Question

I've written a function to send a http put request to update some data but it says, that it is not recieving any data:

updateHuman(human: Human) {
    const url = `${this.url}/${human.id}`;
    const data = JSON.stringify(human);
    return this.http.put(url, data).map(
        response => response.json().data as Human,
        error => console.log(error)
    );
}

After I've changed my function to the following, it is working:

updateHuman(human: Human) {
    const url = `${this.url}/${human.id}`;
    const data = JSON.stringify(human);
    return this.http.put(url, data).map(() => human);
}

Could someone explain me, why the first function is not working but second is working?

Maybe this is helping: if I output my response which is, as above mentioned, not working, I am getting this: Response {_body: null, status: 204, ok: true, statusText: "No Content", headers: Headers, …} headers : Headers _headers : Map(1) {"content-type" => Array(1)} _normalizedNames : Map(1) {"content-type" => "Content-Type"} __proto__ : Object ok : true status : 204 statusText : "No Content" type : null url : "api/human/2" _body : null __proto__ : Body — Leonzen, Sep 28 '17 at 06:52

score 2 · Answer 1 · answered Sep 26 '17 at 07:36

Observables are lazy, you need to be subscribed to them for them to work and retrieve anything. Did you subscribe to your method? Example:

methodToUpdateHuman(human): void{
...
this.updateHuman(human).subscribe((response) => {
   //do something with the response
   console.log.("Response is: ", response);
},
(error) => {
   //catch the error
   console.error("An error occurred, ", error);
});
}

I suggest you read through the Angular Tour Of Heroses, it's based in angular 2 and most of the functionality is functional in angular 4, there is a section dedicated to http requests: https://angular.io/tutorial/toh-pt6

score 1 · Answer 2 · answered Sep 26 '17 at 07:29

In the second example you are not returning the response within the map, you are returning the human that was originally passed in.

So, basically you are creating an illusion that it is working, when it isn't.

Probably best to test your API with something like PostMan, to see if you can get it working with that first.

score 1 · Answer 3 · answered Sep 26 '17 at 07:33

You use map method incorrectly, read more about this method in documentation: http://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/map.html

If you want receive response from server your code should look like that:

updateHuman(human: Human) {
    const url = `${this.url}/${human.id}`;
    const data = JSON.stringify(human);
    return this.http.put(url, data).subscribe(
        response => response.json().data as Human,
        error => console.log(error)
    );
}

You can use map method if you want to modify server response(map some objects to other structures etc.):

updateHuman(human: Human) {
    const url = `${this.url}/${human.id}`;
    const data = JSON.stringify(human);
    return this.http.put(url, data)
    .map(response => { return response.json() }) // you can get json response here 
    .subscribe(
        response => response.data as Human, // -- change here --
        error => console.log(error)
    );
}

map method returns Observable object, so you can subscribe that and wait for response, error or simple complete method(third parameter of subscribe()): http://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/subscribe.html

Angular 4.0 http put request

3 Answers3

Linked