CODEWITHSUNDEEP
angulartypescript
mchev
mchev

Reputation: 725

ERROR TypeError: Cannot read property 'map' of undefined

got this error and really don't get why.. I'm trying to display events on angular-calendar : https://mattlewis92.github.io/angular-calendar/#/async-events

error_handler.ts:1 ERROR TypeError: Cannot read property 'map' of undefined at MapSubscriber.project (planning.component.ts:100) at MapSubscriber._next (map.ts:75) at MapSubscriber.Subscriber.next (Subscriber.ts:95) at MapSubscriber._next (map.ts:80) at MapSubscriber.Subscriber.next (Subscriber.ts:95) at XMLHttpRequest.onLoad (xhr_backend.ts:99) at ZoneDelegate.webpackJsonp.85.ZoneDelegate.invokeTask (zone-mix.js:424) at Object.onInvokeTask (ng_zone.ts:280) at ZoneDelegate.webpackJsonp.85.ZoneDelegate.invokeTask (zone-mix.js:423) at Zone.webpackJsonp.85.Zone.runTask (zone-mix.js:191)

component.ts

import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { CustomDateFormatter } from './custom-date-formatter.provider';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

interface Event {
 id: number;
 title: string;
 start: string;
 end: string;
}

events$: Observable<Array<CalendarEvent<{ event: Event }>>>;

constructor(private http: Http) { }

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

fetchEvents(): void {

    this.events$ = this.http
        .get(this.apiUrl)
        .map((response) => response.json())
        .map(({ results }: { results: Event[] }) => {
            return results.map((event: Event) => {
                return {
                    title: event.title,
                    start: new Date(event.start),
                    end: new Date(event.end),
                    color: colors.yellow
                };
            });
        });

}

json data from api

[
{
"id": 2,
"user_id": 1,
"planning_id": 1,
"start": "2017-09-03T22:00:00.000Z",
"end": "2017-09-06T12:33:46.271Z",
"title": "A 3 day event",
"created_at": "2017-09-05 16:39:47",
"updated_at": "2017-09-05 16:39:47"
},
{
"id": 3,
"user_id": 1,
"planning_id": 1,
"start": "2017-09-03T22:00:00.000Z",
"end": "2017-09-06T12:33:46.271Z",
"title": "A 3 day event",
"created_at": "2017-09-07 13:27:36",
"updated_at": "2017-09-07 13:27:36"
}
]

Upvotes: 2

Views: 23612

Answers (5)

WasiF
WasiF

Reputation: 28847

In my case, I had to upgrade the typescript from [email protected] to [email protected].

How this error come? I upgraded my angular app from angular@10 to angular@11.

Upvotes: 0

SKL
SKL

Reputation: 1443

Remove node_module and run npm install. Its solved my issue

Upvotes: 0

Ganesh Singh
Ganesh Singh

Reputation: 11

  1. ng update
  2. ng update @angular/cli
  3. ng update @angular/core

Upvotes: 1

Francesco Guidi
Francesco Guidi

Reputation: 46

I know it's old but I found a way to make it work with Angular 5

Declare the events this way:

asyncEvents$: Observable<CalendarEvent[]>;

Then load your data with HttpClient

Note that I have a DateEvent returned by my API

loadEvents() {
    this.asyncEvents$ = this.http.get<DateEvent[]>(YOUR_URL) 
      .map(res => { 
        return res.map(event => { 
          return {
              title: event.label,
              start: new Date(event.startDate),
              color: {primary: event.color, secondary: "#D1E8FF"},
              meta: {
                event
              },
              allDay: true
            };
        });
      });
  }

Then everything works as expected

Upvotes: 3

SplitterAlex
SplitterAlex

Reputation: 2823

You have to import the map operator:

import 'rxjs/add/operator/map';

Upvotes: 0

Related Questions