Can't display data coming from service method into component

Question

Still working on my Angular 5 - PHP project.

I want to put all my http methods inside a single file called api, and call any method I want by just importing it into the desired component. I don't know if it's good to work like that or not.

Anyway, here is my service called api.ts:

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

@Injectable()
export class Api{
    public data: any = [];
    constructor(private http: Http){ }

    getPartnersName(){
        this.http.get('http://aff.local/getPartners.php').subscribe(
        (response: Response) =>{
          this.data = response.json();
          console.log(this.data);
          //this.keys.push(this.data);
        },
        error =>{
          console.log(error);
        }
      )
    }
}

And I imported it in app.module.ts:

...//imports
...//Other imports
import { Api } from '../api/api';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [Api],
  bootstrap: [AppComponent]
})
export class AppModule { }

And then I injected it in my component:

constructor(private fb: FormBuilder, private api: Api){

}

Which is here api: Api.

Now, I called the method that I want to use inside ngOnInit():

ngOnInit(){
    this.api.getPartnersName();
}

The problem is that is I am seeing the data at the console properly:

But can't display them on screen:

<div class="row center-block">
    <div class="col-sm-4" *ngFor="let datas of data;">
      {{datas.partner_name}}
    </div>
</div>

Suren Srapyan · Accepted Answer · 2018-01-16T07:31:10.633

3

Your data is defined in the service, but you want it to use in the component. Actually you need to remove the subscribe part from the service's http call implementation and move it into the component.

Service

getPartnersName(){
    return this.http.get('http://aff.local/getPartners.php')
                    .map((response: Response) => response.json());      
}

Component

ngOnInit(){
    this.api.getPartnersName().subscribe(data => this.data = data);
}

Also one note, with Angular 4.3 and upper, Http is deprecated, you can read about HttpClient

edited Jan 16 '18 at 07:31

answered Jan 16 '18 at 06:34

Suren Srapyan

66,568
14
114
112

What is the difference here between `.subscribe` and `.map` in this case ? – alim1990 Jan 16 '18 at 06:37
1

Subscribe is the end station of the stream - saying that way. Map just parses the json and pass the value into the next handler. So in the subscribe you get already passed response – Suren Srapyan Jan 16 '18 at 06:38
if he have a model he can map to model. `get();` – Eldho Jan 16 '18 at 06:43
Yes of course, HttpClient (the newer abstraction) also gives this capability and you can also omit the `map` part – Suren Srapyan Jan 16 '18 at 06:44
1

I have an error on `.subscribe` saying: **Property subscribe does not exist on type void** – alim1990 Jan 16 '18 at 06:45
Sorry, you need to return the observable from the `getPartnersName` – Suren Srapyan Jan 16 '18 at 06:45
Another one: `ERROR TypeError: this.http.get(...).map is not a function` – alim1990 Jan 16 '18 at 06:49
Have you imported `map` function from `rxjs`? – Suren Srapyan Jan 16 '18 at 06:51
I imported the `import 'rxjs/add/operator/map'` but still can't see the data @SurenSrapyan – alim1990 Jan 16 '18 at 07:25
Debug your code, see if you actually get the `data` in the subscribe function. Maybe you don't get it – Suren Srapyan Jan 16 '18 at 07:27
how to debug it ? – alim1990 Jan 16 '18 at 07:34

score 1 · Answer 2 · answered Jan 16 '18 at 06:39

You are storing your data in the scope of your service. You need to return that data to the component, subscribe inside the component and store it on a local variable inside that component, please see below

Service

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

@Injectable()
export class Api{
    constructor(private http: Http){ }

    getPartnersName(){
        this.http.get('http://aff.local/getPartners.php').map(
        (response: Response) =>{
          return response.json();
        },
        error =>{
          console.log(error);
        }
      )
    }
}

Component

public data: any;

ngOnInit(){
    this.api.getPartnersName().
        subscribe((returnData: any) => {
            this.data = returnData;
        });
}

html

<div class="row center-block">
    <div class="col-sm-4" *ngFor="let datas of data;">
      {{datas.partner_name}}
    </div>
</div>

Angular 5 contains HttpClient instead of Http, your service would look as follows using HttpClient

import {Injectable} from '@angular/core';
import { HttpClient, Response } from '@angular/http';

@Injectable()
export class Api{
    constructor(private http: HttpClient){ }

    getPartnersName(){
        return this.http.get<any>('http://aff.local/getPartners.php');
    }
}

Your error handling would then be done in the subscribe inside your component.

Can't display data coming from service method into component

2 Answers2