'Property 'serviceData' does not exist on type 'GeoService'.' Typescript Angular2

Question

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class GeoService {
    constructor(private http: Http) { }

    private extractData(res : any){
        if(res.status < 200 || res.status >=300){
            throw new Error('Bad response sttus:' + res.status);
        }
        this.serviceData = (res.json());
        return this.serviceData || {};
    }

    loaddata(term: string): Observable<any> {
     return this.http.get('http://maps.google.com/maps/api/geocode/json?address=' + term + 'CA&sensor=false')
      .map(this.extractData);
  }
}

Why does it say 'Property 'serviceData' does not exist on type GeoService'?

where you exactly defined `private serviceData:any;` ? – anshuVersatile Jan 25 '17 at 11:56 — anshuVersatile, Jan 25 '17 at 11:56
@anshuVersatile no i have not defined anywhere – Sajeetharan Jan 25 '17 at 11:57 — Sajeetharan, Jan 25 '17 at 11:57
add it before constructor and try make it `publc` – anshuVersatile Jan 25 '17 at 11:58 — anshuVersatile, Jan 25 '17 at 11:58

AT82 · Accepted Answer · 2017-01-25T14:55:12.310

3

Well it doesn't, when you in your extractData function try to refer to this.serviceData, you have not declared it anywhere in your service.

Try:

private extractData(res : any){
    if(res.status < 200 || res.status >=300){
        throw new Error('Bad response sttus:' + res.status);
    }
    let serviceData = res.json(); // declare here!
    return serviceData || {};
}

Other option is that you in your service actually declare the serviceData, then you can use this in your function.

export class GeoService {
   private serviceData;
   ....

// and then use  this:
private extractData(res : any){
    if(res.status < 200 || res.status >=300){
        throw new Error('Bad response sttus:' + res.status);
    }
    this.serviceData = (res.json());
    return this.serviceData || {};
}

}

Then you can use these in the component, that is calling the function in the service like so in your OnInit method or in your constructor:

data; // declare a variable where you want to store the data

constructor(private geoService: GeoService)  {
   this.geoService.loaddata() 
     .subscribe(data => {
       this.data = data;
       console.log(this.data); // your values here!
     });
}

I would suggest you do this in the OnInit method though.

edited Jan 25 '17 at 14:55

answered Jan 25 '17 at 11:55

AT82

71,416
24
140
167

Sorry, updated answer, I had an extra `this` there, remove that one as well ;) – AT82 Jan 25 '17 at 11:58
now it works, i dont get any resullt in app.component – Sajeetharan Jan 25 '17 at 12:13
how can i use this inside app.component.ts? – Sajeetharan Jan 25 '17 at 12:15
Updated answer :) – AT82 Jan 25 '17 at 12:20
@ just declare data on top? – Sajeetharan Jan 25 '17 at 12:22
Yes, declare it in your class, outside any methods, but inside the class :) – AT82 Jan 25 '17 at 12:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133976/discussion-between-sajeetharan-and-ajt-82). – Sajeetharan Jan 25 '17 at 12:25

score 1 · Answer 2 · answered Jan 25 '17 at 12:00

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class GeoService {
    public serviceData:any;
    constructor(private http: Http) { }

    private extractData(res : any){
        if(res.status < 200 || res.status >=300){
            throw new Error('Bad response sttus:' + res.status);
        }
        this.serviceData = (res.json());
        return this.serviceData || {};
    }

    loaddata(term: string): Observable<any> {
     return this.http.get('http://maps.google.com/maps/api/geocode/json?address=' + term + 'CA&sensor=false')
      .map(this.extractData);
  }
}

I consider you are trying to access `GeoService.serviceData` at somewhere else — anshuVersatile, Jan 25 '17 at 12:00

'Property 'serviceData' does not exist on type 'GeoService'.' Typescript Angular2

2 Answers2