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
– mtizziani, Commented Oct 11, 2018 at 7:02
try resarry: any; and in constructor(){ this.resarry={}} — Exterminator
– Exterminator, Commented Oct 11, 2018 at 7:04
Possible duplicate of How to access the correct `this` inside a callback? — Amit Chigadani
– Amit Chigadani, Commented Oct 11, 2018 at 7:08

Jeto · Accepted Answer · 2018-10-11 07:10:18Z

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, 2018 at 7:10

answered Oct 11, 2018 at 7:02

Jeto

15k2 gold badges39 silver badges50 bronze badges

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

2 Comments

mtizziani Over a year ago

all right, but a little more description is necessary to know that focus of this got left in function(){} and not on () => {}

Jeto Over a year ago

@mtizziani Right, I added minimal explanation. I feel like the official docs was clear enough but adding the gist of it won't hurt.

Kutlu Ozel · Accepted Answer · 2018-10-11 07:00:35Z

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, 2018 at 7:00

Kutlu Ozel

1821 silver badge7 bronze badges

1 Comment

mtizziani Over a year ago

this doesn't help, its a focus problem on this

Jeeva J · Accepted Answer · 2018-10-11 07:05:45Z

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);
        });

}

H Mirindra · Accepted Answer · 2018-10-11 07:15:02Z

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, 2018 at 7:15

answered Oct 11, 2018 at 7:05

H Mirindra

944 bronze badges

1 Comment

H Mirindra Over a year ago

Please, follow the comments that i added in the code

Pang · Accepted Answer · 2018-10-22 07:40:07Z

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");
        };

    }
}

Collectives™ on Stack Overflow

Cannot fetch array value in variable - angular

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related