Cannot fetch array value in variable - angular

Question

Brief Explanation: I have fetched result in variable res using **js**.

Result of res on console is shown below.

Requirement: I want to get the value of res in angular variable. I have declared

resarry = [];

When i do

this.resarry = res;
console.log(this.resaary);

Error coming - Cannot set property of 'resarray` undefined.

console.log(results); // no problem in this line console.log(this.resarry); // giving error

export class HomePage {
resarry = [];


constructor(){
     var connection = new JsStore.Instance();
              var dbName = 'Demo';
          connection.openDb(dbName);

          connection.select({
            from: Test1,
          }).then(function(res) {
         // results will be array of objects

            console.log(res,'results');
            this.resarry = results;
console.log(results); // no problem in this line
console.log(this.resarry); // giving error

          }).catch(function(err) {
            console.log(err, 'error');
            alert(err.message);
        });

}
}

if you use `function(res)` the scope of this is lost use arrow functions `(res) => {} `and you will not lose — mtizziani, Oct 11 '18 at 07:02
try `resarry: any;` and in `constructor(){ this.resarry={}}` — Exterminator, Oct 11 '18 at 07:04
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Amit Chigadani, Oct 11 '18 at 07:08

Jeto · Accepted Answer · 2018-10-11T07:10:18.117

2

Change:

connection.select({
  from: Test1,
}).then(function(res) {
  // ...
});

to:

connection.select({
  from: Test1,
}).then(res => {
  // ...
});

Basically, function() { ... } can't access this from the outer scope, while arrow functions can. A more in-depth explanation can be found here.

Also, arrow functions' docs.

edited Oct 11 '18 at 07:10

answered Oct 11 '18 at 07:02

Jeto

14,596
2
32
46

all right, but a little more description is necessary to know that focus of this got left in function(){} and not on () => {} – mtizziani Oct 11 '18 at 07:06
@mtizziani Right, I added minimal explanation. I feel like the official docs was clear enough but adding the gist of it won't hurt. – Jeto Oct 11 '18 at 07:11

score 0 · Answer 2 · answered Oct 11 '18 at 07:00

0

resarry:number[] = new Array();

will initialize an empty array which is not undefined.

you can set the type where your result is expected to be.

answered Oct 11 '18 at 07:00

Kutlu Ozel

182
1
7

this doesn't help, its a focus problem on this – mtizziani Oct 11 '18 at 07:03

H Mirindra · Answer 3 · 2018-10-11T07:15:02.460

0

connection.select({
         from: Test1,
      }).then(function(res) { // results will be array of objects
        console.log(res,'results');
        this.resarry = results; //  perhaps like that => this.resarry = res
        console.log(results); // i think, you should have an error on this line because **results** isn't a variable but a string in your console
        console.log(this.resarry); // giving error

      })

edited Oct 11 '18 at 07:15

answered Oct 11 '18 at 07:05

H Mirindra

94
4

Please, follow the comments that i added in the code – H Mirindra Oct 11 '18 at 07:12

score 0 · Answer 4 · answered Oct 11 '18 at 07:05

Because, the "this" meant to be the current function object. So the "this", you have used in the constructor is not the actual component

Use Arrow function or

constructor(){
     var connection = new JsStore.Instance();
              var dbName = 'Demo';
          connection.openDb(dbName);
     var $this = this;
          connection.select({
            from: Test1,
          }).then(function(res) {
         // results will be array of objects

            console.log(res,'results');
            $this.resarry = results;
console.log(results); // no problem in this line
console.log($this.resarry); // giving error

          }).catch(function(err) {
            console.log(err, 'error');
            alert(err.message);
        });

}

score 0 · Answer 5 · edited Oct 22 '18 at 07:40

User arrow functions as well as typescript types to validate things before assigning

export class HomePage {
    resarry: any[] = []; //--> resarry: any[] -> used to set the type as array
    constructor() {
        let connection = new JsStore.Instance(); //-> use Let insted of Var
        let dbName = 'Demo';
        connection.openDb(dbName);
        connection.select({
            from: "Test1",
        }).then(res => {
            console.log(res);
            if (res)
                if (res.length > 0){
                    this.resarry = res;
                    console.log(this.resarry);
                    console.log("connection Successful with array objects");
                }else{
                    console.log("connection Successful  without array objects");
                }
        }), err => {
            console.log("connection error");
        };

    }
}

Cannot fetch array value in variable - angular

5 Answers5