map() error using Angular 2 & Typescript

Question

I have an Angular 2 application, where I have implemented a pipe to basically check some null values. Problem is when I use map() I get the below error:

core.umd.js:2838 EXCEPTION: Uncaught (in promise): Error: Error in app/components/performances/performances.component.html:18:10 caused by: Cannot read property 'map' of undefined
TypeError: Cannot read property 'map' of undefined

Below you can take a look my code:

import { Pipe, PipeTransform } from '@angular/core';
import {Performance} from '../common/performance';

@Pipe({
    name: 'defaultPerformanceValueIfNull'
})

export class PerformanceCheckValuesPipe implements PipeTransform {
    transform(values: Performance[]): any {
            let performances = values.map(function(p) {
                return Object.assign(p, 
                    { 
                        OneMonthBack: p.OneMonthBack || '-',
                        ThreeMonthsBack: p.ThreeMonthsBack || '-'
                    })
            });
            return performances;
        }
}

I think the code is ok, you can take a look an example I have write here: link

any idea what its going on with my code? thanks!

have you tried just importing the map operator. ie..... import 'rxjs/add/operator/map' or import all operators with import 'rxjs/Rx'; — Bean0341
– Bean0341, Commented Dec 6, 2016 at 15:20

slaesh · Accepted Answer · 2016-12-06 15:20:09Z

2

Do it like this, to make your Pipe more bulletproof!

Seems like during your first pipe-transform that input-data is undefined!

export class PerformanceCheckValuesPipe implements PipeTransform {
   transform(values: Performance[]): any {
      if (!values || !values.length) return [];

      return values.map(p => Object.assign(p, { 
            OneMonthBack: p.OneMonthBack || '-',
            ThreeMonthsBack: p.ThreeMonthsBack || '-'
          })
      );
   }
}

answered Dec 6, 2016 at 15:20

slaesh

17k6 gold badges53 silver badges54 bronze badges

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

2 Comments

gon250 Over a year ago

Thanks @mxii it's working fine with the change you told me, but I don't understand why I have to do it. I'm using the pipe only in one place.. doesn't make sense for me.

slaesh Over a year ago

It's cause of your data you want to transform is during the first change-detection undefined. Assume your variable is something like this values: number[];. Its undefined and will be declared via http.get or something similar.. You could change it to values: number[] = [];.

Collectives™ on Stack Overflow

map() error using Angular 2 & Typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related