Angular - map always returns undefined

Question

I have an angular page which has a list of properties. Each property has a link to view the details of the property. I have a function which maps the property by id, however as a return I am always getting undefined (printed in console).

service.ts

 getProperties(): Observable<IProperty[]>{
     return this.http.get<IProperty>('http://localhost:3000/')
     .do(data => this.properties.push(JSON.stringify(data)))
     .catch(this.handleError);  
 }

 getProperty(id:number): Observable<IProperty>{
    return this.getProperties()
    .map((properties: IProperty[])=> properties.find(p=>p.propertyId===id));
}

propertyDetail.component.ts

import { Component, OnInit } from '@angular/core';
import { IProperty } from './property';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiService} from '../api/api.service';
import { PropertyGuardService } from './property-guard.service' 


@Component
({
  selector: 'propertyDetail',
  templateUrl: './propertyDetail.component.html',
  providers: [PropertyGuardService]
})

export class PropertyDetailComponent implements OnInit
{

    pageTitle:string = "Property Details";
    property: IProperty;
    errorMessage: string ="";

    constructor(private _route : ActivatedRoute,
                private _router: Router,
                private apiService: ApiService){
       console.log(this._route.snapshot.paramMap.get('id'));
    }

    ngOnInit(){
        const param = this._route.snapshot.paramMap.get('id');
        if(param){
            const id = +param;
            this.getProperty(id);

            console.log(this.getProperty(id));
        }            
    }

    getProperty(id:number)
    {
            this.apiService.getProperty(id).subscribe(
            property => this.property = property,
            error => this.errorMessage = <any>error);
    }

    onBack(): void
    {
        this._router.navigate(['/properties']);
    }
}

@echonax added the code, basically it calls the server to fetch all data in a mongoose collection — Chanter08, Jan 07 '18 at 10:21
It prints undefined because you return undefined. As expected. — dfsq, Jan 07 '18 at 10:22
It is expected because `getProperty` returns (implicitly) `undefined`. Did you return anything? No. So it's undefined. — dfsq, Jan 07 '18 at 10:28
`getProperty(id:number)` isn't returning anything check in `PropertyDetailComponent` class. — Cruzer, Jan 07 '18 at 10:29

score 1 · Accepted Answer · answered Jan 07 '18 at 11:09

You set one property using property => this.property = property by subscribe in the suitable time and now you can use this.property in the view like {{property?.id}}.

If you want to check Property whether being fetched properly or not on the console, you can use as follows:

getProperty(id:number){
   this.apiService.getProperty(id).subscribe(
      property => {
        this.property = property,
        console.log(property) // check property returned here           
      });
}

Angular - map always returns undefined

1 Answers1