Невозможно прочитать свойство 'map' из undefined.ANGULAR-CHARTJS

Question

ЭТО 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))

  }
}

В настоящее время я использую в проекте ANGULAR библиотеку "chartjs" для генерации статистических графиков, но при запуске проекта в консоли я получаю следующееошибка: ОШИБКА TypeError: Невозможно прочитать свойство 'map' из неопределенного, что может быть решением?

core.js: 15714 ОШИБКА TypeError: Невозможно прочитать свойство 'map' из неопределенного в SafeSubscriber._next (app.component.ts: 22) в SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber .__ tryOrUnsub (Subscriber.js: 196) в SafeSubscriber.push ../ node_modules / rxjs / _scri5.js.SafeSubscriber.next (Subscriber.js: 134) в Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._next (Subscriber.js: 77) в Subscriber.push ../ node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js: 54) в MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operator / map.js.MapSubscriber._next (map.js:41) на MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next (Subscriber.js: 54) в MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operator / map.js.MapSubscriber._next (map.js): 41) в MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next (Subscriber.js: 54) в FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operator / filter.js.FilterSubscriber._next (filter.js: 38)

Answer 1

Добро пожаловать в SO!

Единственное место, в котором вы использовали функцию map, - это после res['list'] означает, что когда вы получаете res, на нем нет свойства list.

Чтобы исследовать, выполните console.log(res) в начале subscribe и посмотрите, что там.

Также в качестве комментария не используйте теневую переменную (res на карте и в вашей функции), чтобы вы могли изменить ее на

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

После> res['list'].map(r => r.main.temp_max)

И еще одно улучшение> res.list.map(r => r.main.temp_max)