Cannot read property 'map' of undefined.ANGULAR-CHARTJS

Question

THIS IS app.component.ts

import { Component } from '@angular/core';
import { GraficaService } from './services/grafica.service'
import { Chart } from 'chart.js';




@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'yoga';
  chart = [];

  constructor( private _grafica: GraficaService){}

  ngOnInit(){
    this._grafica.graficoEstadistico()
     .subscribe(res => {

        let temp_max = res['list'].map(res => res.main.temp_max)
        let temp_min = res['list'].map(res => res.main.temp_min)
        let alldates = res['list'].map(res => res.dt)

        let weatherDates = []

        alldates.forEach((res) => {
          let jsdate = new Date(res * 1000)
          weatherDates.push(jsdate.toLocaleTimeString('en'), {year: 'numeric', month:'short',day:'numeric'})         
        });

        console.log(weatherDates);

        this.chart = new Chart('canvas',{
          type: 'line',
          data: {
            labels: weatherDates,
            datasets: [
              {
                data: temp_max,
                borderColor: '#3cba9f',
                fill:false

              },
              {
                data: temp_min,
                borderColor: '#ffcc00',
                fill:false

              },
            ]
          },

          options: {
            legend:{
              display:false
            },
            scales:{
              xAxes:[{
                display: true
              }],
              yAxes:[{
                display: true
              }]
            }
          }
        })


     })


    // Yo puedo presentar mi json por consola ,asi . De manera continuada al this
    //.subscribe(res => console.log(res))

  }
}

I'm currently using in an ANGULAR project the "chartjs" library, to generate statistical graphs, but when running the project in console I get the following error: ERROR TypeError: Cannot read property 'map' of undefined, What can be a solution?

core.js:15714 ERROR TypeError: Cannot read property 'map' of undefined at SafeSubscriber._next (app.component.ts:22) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)

Welcome to stackoverflow. Consider reading these articles on how to ask a good question and how to create a Minimal, Complete, and Verifiable example. — jtate

Reza Reza · Accepted Answer · 2019-02-04T21:14:32

The only place that you used map function is after res['list'] means, when you get res there is no list property on it.

To investigate do console.log(res) at the beginning of subscribe and watch what is there.

Also as comment prevent using shadowed variable (res in map and in your function) so you can change it to

Before > res['list'].map(res => res.main.temp_max)

After > res['list'].map(r => r.main.temp_max)

And another improvement > res.list.map(r => r.main.temp_max)

Cannot read property 'map' of undefined.ANGULAR-CHARTJS

1 Answers