Ionic - Angular : Fetching data using HttpClient

Question

I am trying to fetch data in ionic from a given URL using the below simple code, but when I try to log the data it gives me undefined, please help.

getcategories.service.ts

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

@Injectable({
  providedIn: 'root'
})
 export class GetcategoriesService {
  public categories: any;
  constructor(private http: HttpClient) { }

    initialize(){
    this.getservices().then(data => this.categories = data);
  }
  getservices(){
      const   url = 'url goes here';
      return this.http.get(url).toPromise();
  }

}

services.page.ts

import { Component, OnInit } from '@angular/core';
import {GetcategoriesService} from '../../services/getcategories.service';
import {HttpClientModule} from '@angular/common/http';

@Component({
  selector: 'app-services',
  templateUrl: './services.page.html',
  styleUrls: ['./services.page.scss'],
})
export class ServicesPage implements OnInit {
public data: any ;
  constructor( private  getmycategories: GetcategoriesService) { }
  ngOnInit() {
    this.data = this.getmycategories.categories;
    console.log(this.getmycategories.categories);
    console.log(this.data);

  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {HttpClient, HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
   ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

I have been trying to log the data on the console but it returns undefined, APIs are working fine and it's a simple .json collection without any parameter so please advise me if I am missing something and how I can fix it.

Be aware that issues like this are often not that the data doesn't ever arrive, but that it doesn't arrive by the time you are checking for it. Hence: undefined at the time of checking. — Muirik
– Muirik, Commented Oct 19, 2020 at 15:43

Marek W · Accepted Answer · 2020-10-19 15:46:43Z

3

Please refer to the Angular tutorial. The data can not be printed, as the HTTP call might not have finished yet.

To fix your issue I would recommend using Observables instead of Promises.

Service

constructor(private http: HttpClient) {}

getservices() {
  const url = 'url goes here';
  return this.http.get(url);
}

Page

ngOnInit() {
  this.getmycategories.getservices().subscribe(response => {
    console.log(response);
  });
}

edited Oct 19, 2020 at 15:46

answered Oct 19, 2020 at 15:37

Marek W

7295 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Ionic - Angular : Fetching data using HttpClient

1 Answer 1

Service

Page

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Service

Page

Comments

Your Answer

Sign up or log in

Post as a guest

Related