Cannot fetch object from json response

Question

I am new to Angular, but I have been fighting this 5 hours and cannot figure it out: I am not able to fetch object from json request in Angular4 app. I have following function in my service:

   getById(id: number) {  
        return this.http.get('/api/users/' + id, this.jwt()).map((response: Response) => response.json());
    }

In my component I have:

export class EditUserComponent implements OnInit {
  appUser: User;
  id: number;
  private sub: any;

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id']; ;
    });
      this.userService.getById(this.id).subscribe((appUser: User) => {
      this.appUser = appUser;
    });
  }
   constructor(private auth: AuthenticationService, private userService: 
UserService, private route: ActivatedRoute,
    private location: Location) {

  }
}

And I am displaying properties of User class on html view, like {{appUser.firstName}} and so on. Then i get ZoneAwareError:

   TypeError: Cannot read property 'firstName' of undefined
    at Object.eval [as updateRenderer] (ng:///AppModule/EditUserComponent.ngfactory.js:37:34)
    at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:4200/vendor.bundle.js:12856:21)
    at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:12235:14)
    at callViewAction (http://localhost:4200/vendor.bundle.js:12545:17)
    at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12491:13)
    at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:12236:5)
    at callWithDebugContext (http://localhost:4200/vendor.bundle.js:13218:42)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:4200/vendor.bundle.js:12758:12)
    at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:10327:63)
    at RouterOutlet.activateWith (http://localhost:4200/vendor.bundle.js:32148:42)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:31329:16)
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:31310:26)
    at http://localhost:4200/vendor.bundle.js:31246:58
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:31246:29)

DeborahK · Accepted Answer · 2017-05-04 05:27:34Z

2

When your view first displays, the component has not yet retrieved the data. That is why the appUser is undefined. There are several ways to prevent this error:

1) Initialize appUser to something so it is not undefined. This may not make sense for the business rules of your application.

2) Add an *ngIf = "appUser" on one of the top-level HTML elements of your view, such as a <div>. This will prevent displaying the view until the data is retrieved.

3) Add the safe navigation operator on appUser like this: {{appUser?.firstName}} The primary issue with this approach is that you need to add it to every usage of appUser on your page.

edited May 4, 2017 at 5:27

answered May 3, 2017 at 21:36

DeborahK

60.9k12 gold badges115 silver badges135 bronze badges

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

Collectives™ on Stack Overflow

Cannot fetch object from json response

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related