title: How to get data from server in Angular front end
body: <p>I am trying a simple login/signup form. I want to show login successful message on the client side Angular app when the user was successful on the server side. From the serverside I am sending </p>
  
  <pre><code>res.json( {
    title: 'Success',
    message: "Success!",
    token: token // using jsonwebtoken
  });
  </code></pre>
  
  <p>I am using userService for authentication. This is authentication method.</p>
  
  <pre><code>authenticateUser(user: User): Observable&lt;any&gt;{
      const submittedUser = JSON.stringify(user);
      const headers = new Headers({ 'Content-Type': 'application/json'});
      const options = new RequestOptions({headers: headers});
      return this.http.post( baseURL + 'user/signin', submittedUser, options)
        .map(response =&gt; this.processHttpmsgService.extractData(response))
        .catch(error =&gt; Observable.throw(error));
    }
  </code></pre>
  
  <p>This is using processHttpmsgService which simply converts response object into json. Here is extractData method.</p>
  
  <pre><code>public extractData(res: Response) {
      let body = res.json();
      console.log(body);  // server sent data available here.
      return body;
    }
  </code></pre>
  
  <p>Now, server sent data object is availble upto extractData() method. But when I go back into onSubmit() method in signin component. There, on subscription, the data is not available. This is my onSubmit() method.</p>
  
  <pre><code>onSubmit() {
      this.user = this.signinForm.value;
      this.userService.authenticateUser(this.user) 
        .subscribe(data =&gt; {
          this.data = data;
          console.log(data);   // undefined
          console.log(this.data);  // undefined
          localStorage.setItem('token', this.data.token);
          this.router.navigateByUrl('/');
        },
                  error =&gt; {console.error(error); this.router.navigateByUrl('/signin');});
      this.signinForm.reset();
  
    }
  </code></pre>
  
  <p>I don't know why the data is becoming undefined in <code>onSubmit</code> method. I hope I am making right method calls.</p>