Angular: TypeError: Cannot read property 'map' of undefined

Question

I'm using MEAN Stack to build a grading app. I'm trying to get a list of items from the database into my Angular component via a service code but i keep getting core.js:14597 ERROR TypeError: Cannot read property 'map' of undefined.

//scoring.service.js
import { Scoring } from './scoring.model';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';


@Injectable({providedIn: 'root'})
export class ScoringService {
    private scoring: Scoring[] = [];
    private updatedScores = new Subject<Scoring[]>();

    constructor(private http: HttpClient, private router: Router){}

    getScoring() {
        this.http.get<{message: string,   scores: any}>('http://localhost:3000/api/scoring')
            .pipe(map((scoringData) => {
                return scoringData.scores.map(score => {
                    status = score.IsActive ? 'checked' : 'unchecked';
                    return {
                        id: score._id,
                        Criteria: score.Criteria,
                        MaxPoints: score.MaxPoints,
                        IsActive: status, 
                        DateCreated: score.DateCreated,
                        DateModified: score.DateModified
                    };
                });
            }))
            .subscribe((transformedScores) => {
                this.scoring = transformedScores;
                this.updatedScores.next([...this.scoring]);
            });
    }
}

The code is supposed to list the items and map a boolean field from true or false to checked or unchecked respectively. But nothing is being listed at all. The error i'm getting is "Cannot read property 'map' of undefined." And I've used the same set of code in another component to list items without getting the error. Please, help me here, I will appreciate. Thanks.

Hello "user2997304", welcome to StackOverflow! Could you specify the version of RxJS you're using and provide a [_Minimal, Reproducible Example_](https://stackoverflow.com/help/minimal-reproducible-example) so we could help you trace down the issue you're facing? — Edric, Jun 03 '19 at 10:20
can you show us what's inside `scoringData`? Most likely you are missing the property `scores` when you get the data. — Jacopo Sciampi, Jun 03 '19 at 10:23
your `scoringData.scores` is undefined double check the response of your api — John Velasquez, Jun 03 '19 at 10:23
I've checked my scoringData.scores, it actually returns response — user2997304, Jun 03 '19 at 10:55

JStw · Answer 1 · 2019-06-03T13:55:57.923

Put some breakpoints in the pipe(map(scoringData)) part and see what you get.

The exception is throwed because you actually assume that "scoringData" returning an object formated like this :

{"scores": [ << an array of something >> ]}

But if scoringData is null, you tried to used the .map function to an undefined result.

Quick fix can be :

.pipe(map((scoringData) => {
  return (scoringData && scoringData.scores || []).map(score => {
     status = score.IsActive ? 'checked' : 'unchecked';
     return {
         id: score._id,
         Criteria: score.Criteria,
         MaxPoints: score.MaxPoints,
         IsActive: status, 
         DateCreated: score.DateCreated,
         DateModified: score.DateModified
     };
   });
}))

Better way consist to filter your results before using the map in your pipe.

It depend on which library of RxJS you are using, but normaly you can do something like that :

.pipe(filter(scoringData => !!scoringData && !!scoringData.scores && scoringData.scores.length), map((scoringData)

And the import of the filter operator should be the same as map operator :

import { filter } from 'rxjs/operators';

Angular: TypeError: Cannot read property 'map' of undefined

1 Answers1