Exploring the world of HTTP PUT requests in Angular 4.0

Question

Exploring the world of HTTP PUT requests in Angular 4.0

I have encountered an issue with a function I wrote for sending an http put request to update data. The function is not receiving 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)
    );
}

However, when I made some changes to the function as shown below, it started working without any issues:

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

I am curious to know why the first version of the function did not work while the second one works perfectly. Can anyone provide an explanation?

javascript angular http typescript

Answer 1

Answer №1

Observables are like that friend who waits for you to ask before offering help. You must subscribe to them in order to see any results. Have you subscribed to your method yet? Here's an example:

updateHumanDetails(human): void {
...
this.updateHumanInfo(human).subscribe((response) => {
   //do something with the response
   console.log("Response received: ", response);
},
(error) => {
   //handle errors
   console.error("An error occurred: ", error);
});
}

I recommend checking out the Angular Tour Of Heroes, it's focused on angular 2 but still relevant for angular 4, especially the section on making http requests: https://angular.io/tutorial/toh-pt6

Answer 2

Observables are like that friend who waits for you to ask before offering help. You must subscribe to them in order to see any results. Have you subscribed to your method yet? Here's an example:

updateHumanDetails(human): void {
...
this.updateHumanInfo(human).subscribe((response) => {
   //do something with the response
   console.log("Response received: ", response);
},
(error) => {
   //handle errors
   console.error("An error occurred: ", error);
});
}

I recommend checking out the Angular Tour Of Heroes, it's focused on angular 2 but still relevant for angular 4, especially the section on making http requests: https://angular.io/tutorial/toh-pt6

Answer 3

Answer №2

The scenario presented in the next example involves not properly returning the response within the map function, but instead returning the original human object that was initially provided.

Essentially, this creates a false impression that the code is functioning correctly when, in reality, it is not.

It would be advisable to conduct API testing using tools like PostMan to confirm whether it can be successfully implemented in that context.

Answer 4

The scenario presented in the next example involves not properly returning the response within the map function, but instead returning the original human object that was initially provided.

Essentially, this creates a false impression that the code is functioning correctly when, in reality, it is not.

It would be advisable to conduct API testing using tools like PostMan to confirm whether it can be successfully implemented in that context.

Answer 5

Answer №3

You are utilizing the map method incorrectly; it would be beneficial to familiarize yourself with its proper usage by referencing the documentation:

If you intend to receive a response from the server, your code should resemble the following:

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)
    );
}

The map method can be utilized to modify server responses (mapping objects to different 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() }) // accessing json response here 
    .subscribe(
        response => response.data as Human, // -- amend here --
        error => console.log(error)
    );
}

The map method returns an Observable object, allowing you to subscribe and await responses, errors, or completion using the complete method (third parameter of subscribe()):

Answer 6

You are utilizing the map method incorrectly; it would be beneficial to familiarize yourself with its proper usage by referencing the documentation:

If you intend to receive a response from the server, your code should resemble the following:

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)
    );
}

The map method can be utilized to modify server responses (mapping objects to different 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() }) // accessing json response here 
    .subscribe(
        response => response.data as Human, // -- amend here --
        error => console.log(error)
    );
}

The map method returns an Observable object, allowing you to subscribe and await responses, errors, or completion using the complete method (third parameter of subscribe()):

Exploring the world of HTTP PUT requests in Angular 4.0

Answer №1

Answer №2

Answer №3

Similar questions

What is the significance of using @Injectable for our services in Angular2?

What is the best way to save information from an axios promise into my database on separate lines?

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

The animation of the splash screen in Angular is quite jarring and lacks fluidity

Using Ruby variable as a parameter in JavaScript

Generate HTML table with CSS dynamically applied through jQuery

Utilizing an EJS template within an express.js application to extract and assign data to a variable

What is the origin of the second parameter in an arrow function that returns another arrow function in a React component with Redux?

What is the best way to transfer information between two separate Javascript controller files?

403 Forbidden error encountered while making a REST API call using jQuery AJAX

I am having trouble getting the filter functionality to work in my specific situation with AngularJS

Tips for avoiding the default rendering of Nuxt 3 layout?

How to activate select only when specific options are chosen using jQuery

Is it acceptable to assign a value to exports.new?

Is jest the ideal tool for testing an Angular Library?

Combining Google app endpoints with a phonegap app: Step-by-step guide

Trouble with references in Vue TypeScript when trying to access child component methods

One package in Node.js, a pair of dependencies, and a single export utilizing ES6 syntax

The hiding/showing of elements is not being executed correctly by jQuery

Issues with routing in NodeJS Express causing routes to not be called