Angular 2 throw error of array undefined when trying to push data

Question

I am working on Angular2 component in which I have declare array of string and initialise same time, in this component, in one of method I trying to push data but getting error of undefined, not sure what I am missing here!

export class MyComponent implements OnInit {

    public categoryData: string[] = [];

    ngOnInit(): void {

    }

    public loadDataFromServer() {

        let MyServerData = result.data;

        MyServerData.forEach(function (item) {
            this.categoryData.push(item.BarTitle); // error here
        });
    }
}

error

ERROR TypeError: Cannot read property 'categoryData' of undefined

Try an arrow function: `MyServerData.forEach(item => { ... })` — Frank Modica, Jan 08 '19 at 13:41
I believe categoryData:string[] = []; by doing =[] so or not? — K.Z, Jan 08 '19 at 13:42

score 4 · Answer 1 · answered Jan 08 '19 at 13:43

4

You have to use an arrow function, or you lose the this context to the new anonymous function created with the function keyword:

MyServerData.forEach((item) => {
  this.categoryData.push(item.BarTitle); // no error here
});

answered Jan 08 '19 at 13:43

Poul Kruijt

64,681
11
135
134

no ... still got error – K.Z Jan 08 '19 at 13:52
@khurram that's probably because you didn't copy my answer correctly, and are still using the `function` keyword in the `forEach` callback – Poul Kruijt Jan 08 '19 at 14:41
Anyway, this question has already been asked and answered so many times on the Angular forum. It is the ultimate duplicate question. – ConnorsFan Jan 08 '19 at 15:01
@ConnorsFan yep, also very difficult to search for, because the error is always different :) – Poul Kruijt Jan 08 '19 at 15:19

score 2 · Accepted Answer · answered Jan 08 '19 at 13:47

2

Use This code It will Work:

export class MyComponent implements OnInit {

public categoryData:string[] = [];

ngOnInit(): void {

}

 public loadDataFromServer() {

        let MyServerData = result.data;
        const crntData = this;
        MyServerData .forEach(function(item){
            crntData.categoryData.push(item.BarTitle); // error here
        });
    });
}

answered Jan 08 '19 at 13:47

MKJ

120
8

this worked ... thanks ... i don't know why someone give you negative marking! – K.Z Jan 08 '19 at 13:54
2

@khurram he got downvotes because the year isn't 2014.... – Reactgular Jan 08 '19 at 13:55

Angular 2 throw error of array undefined when trying to push data

error

2 Answers2