Angular2+ "Cannot Read Property X of undefined"

Question

Using an object to define data that is displayed in a component. Piping in the data from a json file for now which is read in via the Http service, and getting this error:

and it looks like it is failing within my main component which is here:

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {  Contribution } from '../contribution';
import { ContribService } from '../contrib.service';
import {  Card } from '../card';
import {  Group } from '../group';

@Component({
  providers: [ContribService],
  selector: 'main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit{
  contrib:Contribution = new Contribution();
  constructor(private contribService: ContribService){

  }
  ngOnInit(){
    this.contribService.getContribution().subscribe(data=>this.contrib = data);
  }
  maskCard: boolean = true;
  unmaskedCard: string = this.contrib.thisCard.number;
  maskedCard: string =  'XXXXXXXXXXXX' + this.unmaskedCard.substring(11,15);
  displayedCard: string = this.maskedCard;
  maskToggle = function(): void{
    if(this.maskCard == true){
      this.displayedCard = this.maskedCard;
    }else{
      this.displayedCard = this.unmaskedCard;
    }
  }
}

From what I understand, the error is more than likely an issue with the object "thisCard".

How can I get around it?

Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — AT82, May 25 '17 at 18:50

score 1 · Accepted Answer · answered May 25 '17 at 17:49

Move the rest of your initialization code into the subscribe where you are setting this.contrib. Otherwise, it is getting set before that subscription is fulfilled.

unmaskedCard: string;
maskedCard: string;
displayedCard: string;

ngOnInit(){
  this.contribService.getContribution().subscribe(data=> {
    this.contrib = data; 
    this.unmaskedCard = this.contrib.thisCard.number;
    this.maskedCard = 'XXXXXXXXXXXX' + this.unmaskedCard.substring(11,15);
    this.displayedCard = this.maskedCard;
  });
}

score 0 · Answer 2 · answered May 25 '17 at 17:50

You're setting the properties before neccessary data has been resolved. Try moving the initialization where data has been resolved:

export class MainComponent implements OnInit{
  contrib:Contribution = new Contribution();
  maskCard: boolean;
  unmaskedCard: string;
  maskedCard: string;
  displayedCard: string;
  constructor(private contribService: ContribService){

  }
  ngOnInit(){
    this.contribService.getContribution().subscribe(data=> {
      this.contrib = data;
      this.maskCard = true;
      this.unmaskedCard =  this.contrib.thisCard.number;
      this.maskedCard = 'XXXXXXXXXXXX' + this.unmaskedCard.substring(11,15);
      this.displayedCard = this.maskedCard;
    });
  }

  maskToggle = function(): void{
    if(this.maskCard == true){
      this.displayedCard = this.maskedCard;
    }else{
      this.displayedCard = this.unmaskedCard;
    }
  }
}

Angular2+ "Cannot Read Property X of undefined"

2 Answers2