Service Data not displaying in Component Angular4

Question

I want to return the data from service to component but when i user the service variable to return the data no error appear but just undefined.... kindly guide me through what is just wrong. When using ionic same logic i applied in angular i get the data but not here in angular 4 application.

signal.service.ts

when i do console.log(this.signal)

give me an object array correctly.

import { Injectable } from '@angular/core';
import {HttpModule, Http} from '@angular/http';

@Injectable()

export class SignalsService {
signal : Array<any>;

constructor(public _http:Http) {
    this._http.get('http://localhost/4x/data.php')
        .subscribe(res =>{

            this.signal =  res.json().data;
            return this.signal
        });

} 
}

My component here when i do console.log the signal returning data from service it says Undefined

home.component.ts

import { Component, OnInit } from '@angular/core';
import {HttpModule, Http} from '@angular/http';

import {SignalsService} from '../signals.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
    sig :Array<any>;
   constructor(public _http:Http,public _signa:SignalsService) {

  }
  ngOnInit() {
    console.log(this._signa.signal);


}

Moreover

when i directly insert the service request of HTTP in home.component.ts in ngOnInit section it works and returning the data but why my service is not working.

You get the data asynchronously, which means it takes a while. Your component reads the data, before they were received. Use an observable to notify the component about arrival of the data. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 30, 2017 at 8:51
@GünterZöchbauer can you please tell me the reason also any tutorial to solve this problem and understand for future problem. — propatel
– propatel, Commented Sep 30, 2017 at 9:24

Rahul Singh · Accepted Answer · 2017-09-30 09:12:35Z

0

You service implementation is correct but whay do you want to load everything up top in a constructor better have a separate method and call the get on that method , as of now just replace the code in your component to this.

More on services

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
    sig: Array<any>;
    constructor(public _http: Http) { }
    ngOnInit() {
        this._http.get('http://localhost/4x/data.php')
            .subscribe(res => {
                this.signal = res.json().data;
                console.log(this.signal)
            });
    }
}

The best solution will be Service

import { Injectable } from '@angular/core';
import { HttpModule, Http } from '@angular/http';

@Injectable()

export class SignalsService {

    constructor(public _http: Http) { }

    get() {
        return this._http.get('http://localhost/4x/data.php')
            .map(res => res.json().data);
    }
}

Component

import { Component, OnInit } from '@angular/core';
import { HttpModule, Http } from '@angular/http';

import { SignalsService } from '../signals.service';


@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
    constructor(public _http: Http, public _signa: SignalsService) {

    }
    ngOnInit() { this._signa.get().subscribe(res => { console.log(res) }) }

edited Sep 30, 2017 at 9:12

answered Sep 30, 2017 at 9:07

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

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

7 Comments

propatel Over a year ago

Why i had to do that ? in many of youtube tutorials they didn't even talk about this .... please tell me the reason ..

Rahul Singh Over a year ago

@AHP does it work for you , i am not quite sure why the tutorials said you , but this is the ideal way we handle services

Rahul Singh Over a year ago

how are you accessing it ? i guess when you do it in the component isnide ngOninint it displays in log but not in the next line immedately , this is because we are dealing with async code . just use {{youe var | async}} in template

Rahul Singh Over a year ago

so you are telling this._signa.get().subscribe(res => { console.log(res) }) this console log returns undefined

propatel Over a year ago

Yes the this._signa.get().subscribe(res => { console.log(res) }) giving me undefined in console.log

|

Dung Ngo · Accepted Answer · 2018-05-22 08:02:00Z

0

I had the same error. What i did was add the subscribe in the ngOnInit just like @Rahul Singh above and i use map on the in the get(). Like this:

Component

export class HomeComponent implements OnInit {
sig;
constructor(private _signa: SignalsService) {

}
get(){
 return this._signa.get().map(data => {this.sig = data})
}
ngOnInit() { this.get().subscribe(res => { console.log(res) }) }

answered May 22, 2018 at 8:02

Dung Ngo

1,4821 gold badge13 silver badges25 bronze badges

Collectives™ on Stack Overflow

Service Data not displaying in Component Angular4

signal.service.ts

home.component.ts

Moreover

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

signal.service.ts

home.component.ts

Moreover

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related