Angular 2 - Cannot read property of undefined error using Array.filter

Question

folks, I am working on a project that needs to filter JSON but in developer tools of Chrome, it shows me an error of undefined property.

 chart: JsonChart[] = [];
 charts: JsonCharts[] = [];

 getCharts() {
    this.iChartHttp.getCharts()
        .subscribe(
        charts => this.charts = charts, //return json object
        error => this.errorMessage = <any>error
        );
}

 if (this.chart_id != null) {
        this.getCharts();
         this.chart = this.charts.filter(charts => charts.id === this.chart_id)[0].series; // this like error occur.
    }

Updated Question

It's not getting JSON Array from Service. but it works in another component

iChartHttpService:

 getCharts(): Observable<JsonCharts[]> {
return this.http.get('assets/datas.json')
  .map((res: Response) => res.json())
  .do(data => console.log('server data:', data))  // debug
  .catch(this.handleError);
}

/**
* Handle HTTP error
*/
private handleError(error: any) {
// In a real world app, we might use a remote logging infrastructure
// We'd also dig deeper into the error to get a better message
const errMsg = (error.message) ? error.message :
  error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);

}

Answer 1

It occurs when charts is null, try to place your filter logic after the results,

  getCharts() {
        this.iChartHttp.getCharts()
            .subscribe((charts: any) => {
            this.charts = charts, //return json object
            this.chart = this.charts.filter(charts => charts.id === this.chart_id)[0].series; 
            }, error => {
                error => this.errorMessage = <any>error
            });
    }