Why does Angular show result from successfull http post request as "undefined"

Question

I'm developing a MEAN stack app on Windows10 environment, using Mongoose (v4.4.5) to connect to MongoDB. One of the http post requests in my code executes successfully and writes to MongoDB. But the response returned from the post request shows up as "undefined" on the angular side (in the browser console). This doesn't happen all the time though. There are times when the response actually shows exactly what was written to MongoDB (which is what I'd expect to see all the time). Code shown below:

Angular component code:

import { Component, OnInit, ViewChildren, Renderer2 } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { contactUsInterface } from '../../models/contact-us';
import { HttpClient } from '@angular/common/http';
import { ContactUsService } from '../../services/contact-us.service';
import { ErrorMessageService } from '../../services/error-message.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-contact-us',
  templateUrl: './contact-us.component.html',
  styleUrls: ['./contact-us.component.css'],
  })

export class ContactUsComponent implements OnInit {
  contactUsForm = new FormGroup({
    subject: new FormControl(''),
    message: new FormControl('', Validators.required),
    senderEmail: new FormControl('', [Validators.required, Validators.email]),
  });
  messageFromUser: contactUsInterface;
  response: any;
  successMessage = "Message successfully sent";
  displayMessage = this.successMessage;
  isVisible = "invisible"; //used for successMessage after on submitting form
  submitted = false;
  invalidControlArray = [];

  @ViewChildren("formControl") varInputBoxes;

  constructor(private renderer: Renderer2,
              private contactUsService: ContactUsService,
              private errorMessageService: ErrorMessageService) {}

  ngOnInit() {}

  onSubmit(){
    this.submitted = true;
    if(this.contactUsForm.valid){
      this.messageFromUser = {
        subject: this.contactUsForm.value['subject'],
        message: this.contactUsForm.value['message'],
        senderEmail: this.contactUsForm.value['senderEmail'],
      };
      this.saveMessage();
    }
  };

      saveMessage(){
        this.contactUsService.addMessage(this.messageFromUser)
        .subscribe((data: contactUsInterface) => {this.response = {...data},
                    error => this.displayMessage = this.errorMessageService.convertErrorToMessage(error, this.successMessage)});
//This is where the problem occurs.  "this.resopnse" below shows "undefined"
                    console.log('Response: ', this.response);
     };

  get message() { return this.contactUsForm.get('message'); }
  get senderEmail() { return this.contactUsForm.get('senderEmail'); }
}

Angular service code which has the addMessage function called above by saveMessage():

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map, tap, retry } from 'rxjs/operators';
import { contactUsInterface } from '../models/contact-us';

@Injectable({
  providedIn: 'root'
})

export class ContactUsService {
  private url = '/api/contactus';
  private result: any;
  message: string;

addMessage(messageFromUser: contactUsInterface): Observable<contactUsInterface> {
  return this.http.post<contactUsInterface>(this.url, messageFromUser)
  .pipe(retry(0));
};

constructor(private http: HttpClient) { }
};

Express code which listens to the http request:

var express = require('express');
var router = express.Router();
var contactUsMessage = require('../models/contact_us_message');

  router.route('/')
    .get(function(req,res,next){
      res.send(req)
    })
    .post(function(req,res,next){
      contactUsMessage.create(
        req.body, function(err,result){
          if (err) {
            next(err);
          } else {
            res.send(result);
          }
        }
    )
  })

module.exports = router;

I would have expected that when the express code writes to MongoDB (this part works) and returns "result", that result is what gets returned by addMessage (in the Angular service code) and is assigned to "response" in the Angular component. But that's not how it appears to work.

score -1 · Accepted Answer · answered Jun 01 '19 at 12:16

The link posted in comments by R. Richards provides the perfect explanation to my issue. I modified my angular component code as follows (basically, by placing console.log inside the subscribe section) and it works as intended. Still, if you have a similar issue, the chosen answer in the link provided by R. Richards is a must read.

saveMessage(){
        this.contactUsService.addMessage(this.messageFromUser)
        .subscribe((data: contactUsInterface) => {this.response = {...data},
                    error => this.displayMessage = this.errorMessageService.convertErrorToMessage(error, this.successMessage);
                    console.log('Response: ', this.response);
     }
   )
 }

Why does Angular show result from successfull http post request as "undefined"

1 Answers1