amrfs amrfs - 1 month ago 12
TypeScript Question

Angular 2 build objects from http get request

I've start learning angular 2. I try to get some data via http get request and then I would like to build objects with that data so I can display them with template later. If I am thinking with the wrong way you can tell me.

I have my model AnalyticsData:

export class AnalyticsData {
pagePath: string;
pageViews: number;
uniquePageViews: number;
avgTimeOnPage: number;
entrances: number;
bounceRate: number;

constructor(object?: any) {
this.pagePath = object && object.pagePath || null;
this.pageViews = object && object.pageViews || null;
this.uniquePageViews = object && object.uniquePageViews || null;
this.avgTimeOnPage = object && object.avgTimeOnPage || null;
this.entrances = object && object.entrances || null;
this.bounceRate = object && object.bounceRate || null;
}

}


My DataService:

export class DataService {

private dataUrl: string = 'http://example.com/app/analyticsdata';
constructor(private http: Http) { }

getData() {
return this.http.get(this.dataUrl)
.map((response: Response) => response.json());
}

}


My AnalyticsComponent:

export class AnalyticsComponent implements OnInit {

myData: Array<AnalyticsData>;

constructor(private services: DataService) { }

ngOnInit(): void {
this.getData();
}

getData() {
this.services.getData()
.subscribe(
function (response) {
response.forEach((element: AnalyticsData, index: number) => {
this.myData.push(
new AnalyticsData({
pagePath: element['ga:pagePath'],
pageViews: element.pageViews,
uniquePageViews: element.uniquePageViews,
avgTimeOnPage: element.avgTimeOnPage,
entrances: element.entrances,
bounceRate: element.bounceRate
})
);
});
},
function (error) { console.log("Error happened" + error) },
function () {
console.log("the subscription is completed");
}
);

}

}


The error with the above is:
EXCEPTION: Cannot read property 'push' of undefined
. I don't understand why this happened because I've assign the variable
myData
on the top of the class.

Answer

Also use arrowFunction ()=> as shown below,

getData() {
        this.services.getData()
            .subscribe(
            (response) => {                                       //<<<<===here
                response.forEach((element: AnalyticsData, index: number) => {
                    this.myData.push(
                        new AnalyticsData({
                            pagePath: element['ga:pagePath'],
                            pageViews: element.pageViews,
                            uniquePageViews: element.uniquePageViews,
                            avgTimeOnPage: element.avgTimeOnPage,
                            entrances: element.entrances,
                            bounceRate: element.bounceRate
                        })
                    );
                });
            },
            (error) => { console.log("Error happened" + error) }, //<<<===here
            () => {                                               //<<<===here
                console.log("the subscription is completed");
            }
            );

    }
Comments