CODEWITHSUNDEEP
angulartypescript
Michael Joseph Lagang
Michael Joseph Lagang

Reputation: 13

Cannot read property 'service' of undefined

I don't know why I can't access or find the service even though I always access the service this way to other scripts I have.

First I inject my service which contains the function to add a customer to database and trying to access it from deep two for loops and one if statement. Even the injected firestore cannot be accessed. I don't know why and don't have any idea. Can you guys help me?

 constructor(
    public service: CustomerService,
    public firestore: AngularFirestore,
    ) { }



    scanImage() {
    console.log('>>>> Customer Scanning Image...');
    // let data: Customer;
    // this loops thru available pictures
    for (let image = 0; image < this.images.length; image++) {
      Tesseract.recognize (this.images[image]).then(
        function(result) {

        // store scanned text by new line
        const newLine = result.text.split('\n');

        // loop thru line
        for (let line = 0; line < newLine.length; line++) {

          // store scanned text by word
          const word = newLine[line].split(' ');


          // ask if we find the customer lines in the picture
          if (word[word.length - 1] === '>') {
            console.log(`>>>> time: ${word[0]}`);
            console.log(`>>>> code: ${word[1]}`);
            console.log(`>>>> name: ${word[2] + ' ' + word[word.length - 4]}`);
            console.log(`>>>> total: ${word[word.length - 3]}`);
            console.log(`>>>> status: ${word[word.length - 2]}`);
            console.log('______________________\n');

            const data: Customer = {
              time: word[0],
              code: word[1],
              name: word[2] + ' ' + word[word.length - 3],
              total: word[word.length - 2],
              status: word[word.length - 1]
            };

            this.service.add(data);
            // this.sendCustomer(data);

            // this.firestore.collection('customers').add(data);
            // this.customerList.push(data);

          }
        }
      });
    }
  }

Upvotes: 1

Views: 3145

Answers (2)

Ashish
Ashish

Reputation: 4330

Try using Arrow function expressions instead of function(result) {...}.

An arrow function does not have its own this. The this value of the enclosing lexical scope is used;

Tesseract.recognize (this.images[image]).then(
    (result) => {
        const data = {}
        this.service.add(data); // this reference to class scope and is valid.
    }
)

Upvotes: 0

fjc
fjc

Reputation: 5845

The problem is your function(result) {...} function. By executing your code in it, you create a new scope, and this now refers to the function's context.

Instead, use an arrow function that keeps the class's scope.

An example that shows this behavior:

class Test {
    withArrowFunction() {
        (() => console.log(this))();
    }

    withNormalFunction() {
        (function() {
            console.log(this);
        } )();
    }
}

const test = new Test();
test.withArrowFunction();
test.withNormalFunction();

As you can see, the arrow function has access to the actual object instantiated while the normal function's this is undefined.

Upvotes: 4

Related Questions