TypeError: Cannot read property 'forEach' of undefined

Question

i am working on a project that would allow the user to take a picture of the list and then the program will allow the user to crop the image using cropperjs then it will pass the cropped imagee to the visionAPI where it will extract the text frm the image.However now i am faced with this 2 error

EXCEPTION: Cannot read property 'forEach' of undefined

TypeError: Cannot read property 'forEach' of undefined

And one of the hints given by the compiler is this

at CameraPage.getText (main.js:82525)

I am not sure what went wrong here

Below are the codes:

camera.ts

export class CameraPage {

  public image:string;
  width:number = 500;
  height:number = 500;
  quality:number = 90;

  labels: Array<any> = [];

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public testService: TestService, 
    public cameraService: CameraService,
    public toastCtrl: ToastController
  ) {}

  addPhoto(){
    this.cameraService.getImage(this.width,this.height,this.quality)
      .subscribe( (data) => {
          this.image = (data);
          //console.log(btoa(this.image));
          this.getVision(btoa(this.image));
        //console.log(this.image);
        },(error) => {
          // Toast errot and return DEFAULT_PHOTO from Constants
          this.toast(error);
        }
      );
  }

  toast(message: string) {
    let toast = this.toastCtrl.create({
      message: message,
      duration: 2500,
      showCloseButton: false
    });
    toast.present();
  }


  getVision(image64: string) {
    this.testService.getVisionLabels(image64).subscribe((sub) => {    
      this.labels = sub.responses[0].textAnnotations;    
      this.getText();

    }); 
  }

  getText() {
    this.labels.forEach((label) => {
      let translation = {search: label.description, result: ''};
      console.log(label.description);
    });    
  }   
}

camera.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Camera
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <img src={{image}} *ngIf="image" />
  <ion-card-content>


    <button ion-button block outline (click)="addPhoto()">Take A Picture</button>

    <div class="results">
      <div *ngFor="let label of labels">

      <h2>{{label.description}}</h2>
      </div>
    </div>

  </ion-card-content>
</ion-content>

Solution

What the error means is that this.labels is undefined in the getText() method.

You should set a break point at two locations to analyze the problem:

1. At the this.labels = sub.responses[0].textAnnotations line
2. At the this.labels.forEach line

Things to check:

• The 1st breakpoint should be hit before the 2nd breakpoint. If the order is the other way around, you know that the labels property has not yet been set when you try to use it.
• In the 1st breakpoint, inspect sub.responses[0] to see what you've got (textAnnotations may be undefined).

Comments

[GX-X]

Ok sure , thanks for the help i will be trying to find out the issue.Will post any updates here

[GX-X]

So some of the updates here . I run the debugger on google devTools and realise that this.labels.forEach line is undefined while for the this.labels = sub.responses[0].textAnnonations returns 0 : Object length : 1 proto : Array(0).So i guess the problem is with this.labels

[Lucero]

In which order did the breakpoints get hit? Is "this" pointing to the same instance on both breakpoints?

[GX-X]

the order is this.labels = sub.responses[0].textAnnotations follow by this.labels.forEach . As i mouse over the this.labels both shows undefined

[Lucero]

After stepping over the 1st this.label should have a value. If that value is gone by the time you reach the 2nd breakpoint, it may be that this is pointing to another instance. See the question in my comment above.

[GX-X]

i think i have found the error . It is image-annotator::Bad image data.: Image processing error!