How to get response from API using Angular 9 http post request

Question

I am using Postman to make POST request to API and save data to DB and I am getting as response {message:"Contact created successfully"}. BUT in Angular I don't get any response. What I am doing wrong?

I have provided a piece of my code below.

Angular Service

 add(contactItem: any){
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })

    };
    
    const contactApiUrl = "url to api/addContact.php";

    return this.http.post(contactApiUrl,contactItem, httpOptions).pipe(
            map( (response: any) => { console.log(response); }),
            catchError(this.handleError)
          );

  }

Contact.component.ts

  //here from the form I pass the data to service add()
  onSubmit(contactData){
     console.log(contactData);
     this.contactService.add(contactData).subscribe();

     //this.contactLst = this.contactService.get();
  }

addContact.php

//more code here

// create the product
if($contact->create()){
  
    // set response code - 201 created
    http_response_code(201);
  
    // tell the user
    echo json_encode(array("message" => "Contact was created."));
}
// if unable to create the contact, tell the user
else{
  
    // set response code - 503 service unavailable
    http_response_code(503);
  
    // tell the user
    echo json_encode(array("message" => "Unable to create contact."));
}

Any help is welcome.

Can you show where you call the add() method in the service? The caller needs to subscribe to the result in order to get the response. Do you see the call being made in the network tab of your browser's Dev Tools? In Chrome you can bring up the DevTools by pressing F12. — harleybl
– harleybl, Commented Sep 15, 2020 at 16:25

mwilson · Accepted Answer · 2020-09-15 16:29:02Z

1

You're not actually returning the response. You are only logging it:

add(contactItem: any){
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })

    };
    
    const contactApiUrl = "url to api/addContact.php";

    return this.http.post(contactApiUrl,contactItem, httpOptions).pipe(
            map( (response: any) => response ), // <- return response
            catchError(this.handleError)
          );

  }

To call it, you need to specify what happens in your subscribe callback:

//here from the form I pass the data to service add()
  onSubmit(contactData){
     console.log(contactData);
     this.contactService.add(contactData).subscribe( r => console.log(r) );

     //this.contactLst = this.contactService.get();
  }

answered Sep 15, 2020 at 16:29

mwilson

13.1k10 gold badges65 silver badges103 bronze badges

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

5 Comments

Marios Nikolaou Over a year ago

So in the service http.post the map function returns the response to the subscriber and prints it from there?

mwilson Over a year ago

Yea, if that's how you want it. I'd imagine you'd do something with the response instead of just printing it to the console at some point.

mwilson Over a year ago

You could also just make your add and onSubmit function async so your could just await the response instead of dealing with subscribers. It's personal preference though.

Marios Nikolaou Over a year ago

Can you show me an example with async in your answer?

Marios Nikolaou Over a year ago

I don't understand why handleError() function is implemented in service class and displays the errors ok but response must be printed in the subscriber().

Collectives™ on Stack Overflow

How to get response from API using Angular 9 http post request

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related