Why angular Service data is get undefined if I call from component

Question

I am Using JSONPlace holder Fake API for fetching data. I am getting the api data in service but if I call that service from my app component I am getting undefined why this is my code

My Service.ts is

import { Injectable } from '@angular/core';
import { Http, URLSearchParams, Response, RequestOptions, Headers } from '@angular/http';
import 'rxjs/RX';
import 'rxjs/add/operator/map';
@Injectable()
export class Service {
    apiRoot: string = 'https://jsonplaceholder.typicode.com/comments?' 
    postId = 1;
    data;
    constructor(private _http: Http) {
        this._http.get(this.apiRoot).subscribe((data) => {
            this.data = data.json();
        });
    }
    init() {
        return this.data;
    }

}

My component code is

import { Component, OnInit } from '@angular/core'; import { InfiniteService } from './infinite.service'; //import all rxjs/Rx opeartor  import 'rxjs/add/operator/map';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit {
    data;
    constructor(private _infinteService: InfiniteService) {
        this.data = this._infinteService.init();
        console.log(this.data);
    }

    GetPosition($event) {
        if ($event == 'Bottom') {
            console.log($event);
        }
        else {
            console.log($event);
        }
    }
    ngOnInit() { }

}

why I am not able to get service data in component?

Chiien · Accepted Answer · 2018-05-21 12:27:28Z

3

Because HTTP its async function! I recommend to use HttpClient, so you don't need to use map function! You can try that

getData(): Observable<any> {
 return this._http.get(this.apiRoot)
}

And you just call him in component like that

this._infinteService.getData().subscribe(
 data => console.log(data)
)

You need to return an Observable, and then you can use subscribe to call request. Try that and tell if worked! Thanks

answered May 21, 2018 at 12:27

Chiien

3411 gold badge3 silver badges14 bronze badges

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

Comments

Sangwin Gawande · Accepted Answer · 2018-05-21 13:25:00Z

2

Make following changes in your code.

Service :

constructor(private _http: Http) {
}
init() {
    return this._http.get(this.apiRoot);
}

Component :

constructor(private _infinteService: InfiniteService) {
    this._infinteService.init().subscribe((data) => {
        this.data = data;
        console.log(this.data);
    });
}

You need to use .subscribe in component call.

answered May 21, 2018 at 13:25

Sangwin Gawande

8,2548 gold badges53 silver badges67 bronze badges

4 Comments

Sangwin Gawande Over a year ago

What is the issue? Can you tell me whats in console.log?

Sangwin Gawande Over a year ago

I tried same in my system, Works nicely. Try changing this.apiRoot with sample URL.

Chellappan வ Over a year ago

yes Thanks i have changed the api now it is working fine Thank you!

Sangwin Gawande Over a year ago

Great. Glad we could help.

Mike Bovenlander · Accepted Answer · 2018-05-21 12:27:16Z

1

You don't need the .json() on your data object. As of Angular4 the default responseType is JSON and the response data is already parsed for us.

You should return the Observable from your service and subscribe to it in your component.

answered May 21, 2018 at 12:27

Mike Bovenlander

5,4645 gold badges32 silver badges47 bronze badges

Comments

Sandun Susantha · Accepted Answer · 2020-11-02 03:36:52Z

0

The reason for this occur is it will take some time to get the response from the server. So we can set it in promises. use the following command to get data in promises.

 this._customerService.getCustomers().subscribe(data => this.customers = data);

answered Nov 2, 2020 at 3:36

Sandun Susantha

1,1501 gold badge11 silver badges11 bronze badges

Collectives™ on Stack Overflow

Why angular Service data is get undefined if I call from component

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related