Cannot read property 'get' of undefined in typescript

Question

Here I want to display list of customers for that I am writing one services class in that class writing one function getCustomer()

data.service.ts

 //  @Injectable() // comment to this line in service if we are inject service in component
    export class DataService {
    constructor(public http: Http) { }
    getCustomers(): Promise<ICustomer[]> {
        return this.http.get(this.customersBaseUrl)
                   .toPromise()
                   .then(response => response.json().data as ICustomer[])
                   .catch(this.handleError);
      }
}

In customer.component.ts call getCustomer()

 constructor(@Inject(DataService) private dataService: DataService) { }
 ngOnInit() {
    this.title;
    this.filterText = 'Filter Customers:';
    this.dataService.getCustomers().then(customers => this.customers = customers.slice(1, 5));
}

app.module.ts

import { HttpModule } from '@angular/http';
@NgModule({ 
    declarations: [
        AppComponent,
        CustomersComponent,
    ],
    imports: [ 
        HttpModule,
        app_routing,
        ..     
    ],
    providers: [
     DataService,
    ],
    bootstrap: [AppComponent,NavbarComponent]
})

Give me suggestion if i am wrong in any point.I am new in typescript so I don't have that much idea about this.Thanks in advance

Have you declared your service under providers in your ngModule? Possibly in a file called app.module.ts — Justin Tamblyn
– Justin Tamblyn, Commented Jan 3, 2017 at 5:50
yes I already declared service and httpModule in app.module.ts — Priyanka Ahire
– Priyanka Ahire, Commented Jan 3, 2017 at 5:53
for dataService instantiated or not I am giving condition .and in console "find services" meassgae display .. — Priyanka Ahire
– Priyanka Ahire, Commented Jan 3, 2017 at 5:57
it looks fine by given code, can you please share app.module and service.ts, I think "http" is undefined here, I don't know what is "@Inject(DataService)" here. did you add decorator "@Injectable()" on service class ??? — A.T.
– A.T., Commented Jan 3, 2017 at 7:47

Trusha · Accepted Answer · 2017-01-03 11:42:00Z

1

just change your code as below..

ngOnInit() {
this.title;
this.filterText = 'Filter Customers:';
this.dataService.getCustomers().subscribe(customers => this.customers = customers.slice(1, 5));

}

In data.service.ts

getCustomers():  Observable<ICustomer[][]> {
    return this.http.get(this.customersBaseUrl)
        .map((response: Response) => <ICustomer[]>response.json())
        .do(data => console.log("All: " + JSON.stringify(data)))
        .catch(this.handleError);
}

private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

edited Jan 3, 2017 at 11:42

answered Jan 3, 2017 at 11:11

Trusha

6115 silver badges12 bronze badges

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

3 Comments

Priyanka Ahire Over a year ago

subscribe is property of observal and then is property of promise..if change subscribe instead of then. Then it's give error

Priyanka Ahire Over a year ago

Actuall I found out exact error..please help me to solve this

Priyanka Ahire Over a year ago

Finally , It's working if we are inject service in component then no need to @Injectable() to service i.e DataService..just comment this @injectable() in service file..I will update code

Priyanka Ahire · Accepted Answer · 2017-01-05 09:15:52Z

0

comment to @Injectable() in DataService. if we are inject service in component then no need to inject in service

//@Injectable() 
export class DataService {
    constructor(public http: Http) { }
    getCustomers(): Promise<ICustomer[]> {
        return this.http.get(this.customersBaseUrl)
                   .toPromise()
                   .then(response => response.json().data as ICustomer[])
                   .catch(this.handleError);
      }
}

answered Jan 5, 2017 at 9:15

Priyanka Ahire

5022 gold badges11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'get' of undefined in typescript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related