How to send an objecto using HTTP Post in Angular

Question

Im trying to send an object called Pack to my API Rest server from my angular service. In order to do so, I have the following function:

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

However, I know that the way im trying to send Pack is not correct. I would like to know how can I send Pack correctly so I can get it in my API Rest and then how can I access that object receive. I know that when you use GET, you can do:

const Pack = req.query.Pack;

How can I do the same with POST?

My API Rest POST calling is:

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

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

})

Does this help you ? https://stackoverflow.com/a/44741499/6444705 — Emilien, May 25 '21 at 15:42
I don´t see how that user is sending the object and then gets it. — Jesús Navarro Hernández, May 25 '21 at 15:44

Rebai Ahmed · Answer 1 · 2021-05-25T16:02:45.470

0

I would suggest is to use Observable insteaf of Promise :

      save_pack(pack: any){
            this.httpClient.post<any>('http://localhost:8000/save_pack', pack)
 .subscribe(result => {
  console.log('result saved with success');
   }, err => {
  console.log('err saving new pack', pack);
    
   });
              
          }
        }

For the back-end, you can get the body data :

const pack = req.body.pack;

My suggestion for you to implement a clean code : (always give a type for your data instead of type any )

edited May 25 '21 at 16:02

answered May 25 '21 at 15:53

Rebai Ahmed

1,509
1
14
21

Why do you add + '\choice' to the URL? – Jesús Navarro Hernández May 25 '21 at 16:00
I just edited and correct it, please check it , if it works , please upvote :) – Rebai Ahmed May 25 '21 at 16:03
There is an error when I try to do req.body.pack, saying that it is undefined – Jesús Navarro Hernández May 25 '21 at 16:26
Try to make console.log for req.body and what' s the result you got – Rebai Ahmed May 25 '21 at 16:27
Just says undefined – Jesús Navarro Hernández May 25 '21 at 16:33
can you share your back-end code please ! – Rebai Ahmed May 25 '21 at 16:36
What's the result of console.log(req.body) ? you can eliminate const Pack = req.body.Pack; console.log("Paquete: " + Pack); temporarily until we debug your body result – Rebai Ahmed May 25 '21 at 16:51
As I have said, i get undefined. – Jesús Navarro Hernández May 25 '21 at 17:09
Did you added app.use(express.bodyParser()) to your express code ? you need to test your API via postman, I tried to help with Angular , but the back-end I think it's not implemented correctly – Rebai Ahmed May 26 '21 at 08:08
You mean adding this ? app.use(express.bodyParser()) right before app.get and app.post functions right? – Jesús Navarro Hernández May 26 '21 at 08:43
Yeah ,it should be added – Rebai Ahmed May 26 '21 at 08:47
No, still getting the same error. I don´t know what else I can do – Jesús Navarro Hernández May 28 '21 at 10:04
If you can put your project in public gihub repo, that I can show the code and find a solution :) – Rebai Ahmed May 28 '21 at 10:05

How to send an objecto using HTTP Post in Angular

1 Answers1