2

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" } ]
Improve this question

5 Answers 5

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I get TypeError: res.map is not a function at MapSubscriber.eval
Be sure that you import { map } from 'rxjs/operators/map';
Yes is imported. My issue here for more details
1
  1. ng update
  2. ng update @angular/cli
  3. ng update @angular/core
Improve this answer

Comments

0

You have to import the map operator:

import 'rxjs/add/operator/map';

Improve this answer

3 Comments

Yes, it was done. Thanks for the precision I added it in the example.
I'm still stuck with this problem. I have searched some alternatives who works but for my curiosity i would like to know the cause of this one.
@mchev have you found the solution? my issue here
0

Remove node_module and run npm install. Its solved my issue

Improve this answer

Comments

0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.