Angular2 - send object in http.post request body

Question

I am working on Angular2 web project, in my ts class I have an object :

  Object: any=  {
      "first":null,
      "second":null,
      "third": null,
  }

I want to send the object in http.post request body. I tried the next code, but it doesnot work;

     method() {
       const url='/pathname/';
       return this.http.post(url, this.Object).pipe(map((data:any)=>data));
     }

I got an error in console:

    error :  HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "OK",url: "http://localhost:8080/path", ok: false,..}
    headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
    message: "Http failure response for 
    http://localhost:8080/path 400 OK"
    name: "HttpErrorResponse"
    ok: false
    status: 400
    statusText: "OK"
    url: "http://localhost:8080/path"

Can you explain me how to send typescript object in post request body ? Thank you in advance

Did you `subscribe` to that post request? If yes then does request appear in network tab? It does have body with your object data? — Buczkowski, Jun 26 '19 at 08:18
@Buczkowski Yes, the request appears in network tab and I can see my object in 'Request Payload' field, but unfrotunately I dont know what does it mean — T.S, Jun 26 '19 at 08:24
@"Yes, the request appears in network tab and I can see my object in 'Request Payload' field" - then what precisely is not working here? Request is being sent with the expected contents, seems like working to me. — mbojko, Jun 26 '19 at 08:25
@mbojko I get an error in console and it doesnot return data — T.S, Jun 26 '19 at 08:27
@T.S error doesn't have much details but it simply means that it's **Bad Request**. There could be several reasons behind but probably request isn't formed well. — Buczkowski, Jun 26 '19 at 08:35
@T.S your back-end returns an error, there is no problem with your code. Maybe `this.Object` does not contain data asked by your backend. — youri, Jun 26 '19 at 08:39
@youri I've made the request with soapUI and everythins worked fine, I will check this.Object once again, maybe you are right — T.S, Jun 26 '19 at 08:41
1) Don't name your object UpperCase Object, it already exists in JavaScript as a function. 2) What does your BackEnd return? — Roberto Zvjerković, Jun 26 '19 at 08:44
https://stackoverflow.com/questions/47180634/i-get-http-failure-response-for-unknown-url-0-unknown-error-instead-of-actu There's your answer. — Roberto Zvjerković, Jun 26 '19 at 08:46
@"I've made the request with soapUI and everythins worked fine," - then it's the "spot the difference" game. Compare the correct request with the one sent by your app, every header, and find what's missing. — mbojko, Jun 26 '19 at 08:49

Nabin Paudyal · Answer 1 · 2019-06-26T08:48:19.110

0

You need to subscribe to the post observable returned by method function. It is done like this.

this.method().subscribe(
                 res => {
                 // Handle success response here
                 },
                 err => {
                 // Handle error response here
                 }
              );

edited Jun 26 '19 at 08:48

answered Jun 26 '19 at 08:24

Nabin Paudyal

1,591
8
14

The HTTP request should actually be subscribed to in the code that would call the method `method()`, not in the method’s code. – Edric Jun 26 '19 at 08:44
Thanks Edric for pointing it out. I have updated my answer accordingly. – Nabin Paudyal Jun 26 '19 at 08:48
The OP subscribed to the observable, his problem is about a **400: bad request**. – youri Jun 26 '19 at 08:50

score 0 · Answer 2 · answered Jun 26 '19 at 12:50

you should subscribe the post method because this method of http class returns a observable. you can rewrite your code as:-

 method() {
   const url='/pathname/';
   return this.http.post(url, this.Object).subscribe( resp=> {
               const data = resp; // response you get from serve
          }, error => {
                      console.log(error); //error you get from server 
          });
 }

Dheeraj Kumar · Answer 3 · 2019-06-26T09:04:02.660

-3

you are getting the 400 bad request error, the payload keys are mis matching with the middle wear. please suggest pass the correct params into Request object.

edited Jun 26 '19 at 09:04

answered Jun 26 '19 at 08:26

Dheeraj Kumar

146
1
10

1

Hi Dheeraj, welcome to StackOverflow! Please consider providing a clear and concise explanation to why your answer would help the OP. – Edric Jun 26 '19 at 08:29
Hello Edric, OP did not subscribed the response thats why i have suggested him to create separate service where he can create methods and subscribe those methods result into their component. – Dheeraj Kumar Jun 26 '19 at 08:42
Hello Edric, he is getting the 400 bad request error, the payload keys are mis matching with the middle wear. please suggest him to pass correct params in the object. – Dheeraj Kumar Jun 26 '19 at 08:45

Angular2 - send object in http.post request body

3 Answers3