Sending Object through HTTP POST in Angular

Question

Im creating a Web App using angular. Right now, my project already have a backend, a frontend and a API Rest. In this case, im trying to send an object from my page in the frontend to the service of the frontend, like this:

  async save_pack(index: any){
    await this.usuarioService.save_pack(this.packs[index])
      .then((data) => {
        console.log(JSON.stringify(data));
      })
      .catch(err => alert(err));
  }

then, I use the HTTP POST to send that object from the service to the API Rest like this:

   save_pack(Pack: any){
    return this.http
      .post("http://localhost:8000/save_pack",Pack)
      .toPromise()
  }

My function in the API Rest is this:

app.post('/save_pack', async (req,res) => {
    console.log("Elementos de la respuesta: " + req.body)
    //const Pack = req.body.Pack;

    let result = await save_pack(Pack);
    res.send(result)
    return res;
})

However, when I tried to check if the object was correctly passed, I realised that it is not properly passed as I doesn´t show it values (I get Elementos de la respuesta: undefined). I guess im doing it wrong, but I can´t figure out how to do it, because I am new in Angular. Any idea?

I dont' think the 2 given answers are actually that relevant to your issue (but I agree that you should really just use Observables). When you check the POST request in the browser network console, does it have the POST payload you expect? — MikeOne
– MikeOne, Commented Jun 9, 2021 at 11:46

Dario · Accepted Answer · 2021-06-09 13:34:53Z

1

from the documentation

The HttpClient service makes use of observables for all transactions. You must import the RxJS observable and operator symbols that appear in the example snippets. These ConfigService imports are typical.

this one:

save_pack(Pack: any){
    return new Promise((resolve, reject) =>{
      this.http
        .post("http://localhost:8000/save_pack",Pack)
        .subscribe(res => {
            resolve(res);
          },
          (err: any) => {
            reject(err);
          }
        )
    });
  }

should be:

save_pack(Pack: any){
    return this.http
        .post("http://localhost:8000/save_pack",Pack)
        .toPromise
    });
  }

and then you can do something like this:

this.save_pack.then((data) => {
        console.log(JSON.stringify(data));
      })
      .catch((error) => {
        console.log("Promise rejected with " + JSON.stringify(error));
      });

i'm working on angular since 5 month, so i'm not really expert but i can tell you a thing: learn well observables, and use promise adn async/await pattern only if you cant do otherwise, for the rest the observables with rxjs and a state managment, like ngrx(reactive programming pattern & redux patterm) cover almost all use cases, and are very powerfull. good coding!

edited Jun 9, 2021 at 13:34

answered Jun 9, 2021 at 10:58

Dario

3942 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jesús Navarro Hernández Over a year ago

I don´t understand what you are doing. How do you check that the object is passed correctly?

Dario Over a year ago

hi jesus, so if you want check if your passed data are correct you can check the broswer console. eg. in Chrome console if you go to Network panel, you will find your api call, and clicking on it, you can see all information about api call. but your save_pack is doing something wrong, because natively the httpclient of angular return an observable, and you are subscribing an observable in a promise. i write you how to transform an observable in a promise, so you will work with async await

Dario Over a year ago

maybe this guide can help you to understand better your mistake

Jesús Navarro Hernández Over a year ago

I have try with your solution but I get exactly the same result. Check the edited question. Still, when I do a console.log(req.body) into the server.js just to check if anything was passed, I still get undefined.

Dario Over a year ago

async save_pack(index: any){ await this.usuarioService.save_pack(this.packs[index])....} here are you doing a recursive async function?

pulkitjpatel · Accepted Answer · 2021-06-09 11:32:29Z

0

You should make use of Observables rather than promises as Observables are well supported throughout the Angular.

So your HTTP POST method should be like this

save_pack(Pack: any): Observable<any> {
    return this.http.post("http://localhost:8000/save_pack",Pack);
  }

And then you should subscribe to this Observable in your component

save_pack(index: any) {
    this.usuarioService.save_pack(this.packs[index])
      .subscribe(resp => {
        console.log('resp');
      });      
  }

answered Jun 9, 2021 at 11:32

pulkitjpatel

463 bronze badges

3 Comments

Jesús Navarro Hernández Over a year ago

I have used your solution. However, it is not working neither. Just to check, I put a console.log(Pack) right before the return this.http.post ... If I check it, I can see that it is the full object. However, tight into the app.post, when I do the console.log of req.body, I get undefined, so the object is not being passed. Why?

pulkitjpatel Over a year ago

can you check in the network tab if the request is having the body you expect ? If yes, then the issue is not at the Angular side

Jesús Navarro Hernández Over a year ago

I did, and it is working fine. The problem is originated when I try to send that object to server.js. I get undefined as req.body

Collectives™ on Stack Overflow

Sending Object through HTTP POST in Angular

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related