Angular Positing Console Errors on API Call

Question

I've got an angular site that's reporting error messages to the console, but it's working on screen. I suspect it's due to how the page renders, but after googling the error and Angular rendering I can't see how to fix it.

This is how the console looks:

This is the service that's handling the API calls:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from "@angular/http";

@Injectable()
export class WmApiService {

  private _baseUrl = "http://localhost:58061/";
  tempuser = "WebDevelopWolf";
  modules: any;

  constructor(private _http: Http) {
    console.log('Wavemaker API Initialized...');
  }

  // On successful API call
  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  }

  // On Error in API Call
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

  // Basic Get W/ No Body
  getService(url: string): Promise<any> {
    return this._http
        .get(this._baseUrl + url)
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError);
  }

  // Basic Post W/ Body
  postService(url: string, body: any): Promise<any> {
    console.log(body);
    let headers = new Headers({'Content-Type': 'application/json'});
    return this._http
      .post(this._baseUrl + url, body, {headers: headers})
      .toPromise()
      .then(this.extractData)
      .catch(this.handleError);
  }

}

And finally the call to the service:

ngOnInit() {
    this.getUserProfile();
  }

  // Fill the user profile information
  getUserProfile() {
    this._wmapi
    .getService("User/" + this._wmapi.tempuser)
    .then((result) => {
      // Push the user to UI
      this.userProfile = result;
      // Set the user avatar
      this.userAvatar = "../assets/users/profile/" + this.userProfile.Username + ".png"; 
    })
    .catch(error => console.log(error));
  }

I've had a couple of people tell me in the past that I shouldn't be using promises because they're outdated, but it's just what familiar with from working with Ionic a couple of years back - however, if there is a better way to do it I'm definitely open to suggestion, especially if it's the promise that's causing the issue.

in your html template use UserFullName like this : {{some-value?.UserFullName}} — Lia
– Lia, Commented Aug 21, 2018 at 10:52
Probably you're calling a variable "UserFullName" somewhere that is not yet initialized. — JeroenE
– JeroenE, Commented Aug 21, 2018 at 10:54
I suggest you make yourself familiar with the async pipe and don't resolve the promise yourself. The error occurs since the template tries to render data before the asynchronous call is completed. You can use a default object (like "loading..") or the elvis operator to avoid the error on the console. — Thomas
– Thomas, Commented Aug 21, 2018 at 10:54
Possible duplicate of Angular2: Cannot read property 'name' of undefined — Igor
– Igor, Commented Aug 21, 2018 at 10:56

Lia · Accepted Answer · 2018-08-21 10:57:06Z

2

try:

<div>{{some-value?.UserFullName}}</div>

Your some-value object doesn't have the value until the API response arrives. Then use ? to apply the null check until the response arrives.

answered Aug 21, 2018 at 10:57

Lia

12k3 gold badges35 silver badges53 bronze badges

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

Comments

Oleksandr Martyniuk · Accepted Answer · 2018-08-21 10:58:14Z

0

The problem is that angular is trying to render your component and this.userProfile is not instantiated yet by that moment, so you are trying to resolve the props of undefined.

You need to handle the case when there is no userProfile, so you can either use ngIf for that section of template, or use getter to get those props, or perform check directly in template {{userProfile && userProfile.someProp}}

answered Aug 21, 2018 at 10:58

Oleksandr Martyniuk

4482 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular Positing Console Errors on API Call

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related