Not able to connect and fetch details from api http calls in ionic and angular

Question

I am trying to fetch details from API with Http Calls in angular/ionic app, the api is not getting called and not the details not getting fetched, i am trying to fetch the details with simple angular expression (binding).

api.service.ts

import { Injectable } from '@angular/core';
//import { Observable, of, throwError } from 'rxjs';
import { HttpClient } from '@angular/common/http';
//import { catchError, tap, map } from "rxjs/operators";

/**const httpOptions = {
  headers: new HttpHeaders({'Content-type': 'application/jason'})
};**/

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getUsers()
  {
    return this.http.get("http://localhost:3000/api/con_users");
  }

}

app.module.ts

import { HttpClientModule } from "@angular/common/http";

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

profile.page.service

import { Component, OnInit } from '@angular/core';
import { ApiService } from 'src/app/api.service';


@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
})

export class ProfilePage  {
  userDetails: any=[];
  constructor(public apiService:ApiService) {}

  getUserDetails()
  {
    this.apiService.getUsers().subscribe((data)=>{
      var anyData = <any>data;
      this.userDetails = anyData.data;
    })
  }

}

profile.page.html

<ion-content>

<ion-list>
  <ion-item *ngFor="let user of userDetails">
    {{user.email}}
  </ion-item>
</ion-list>

</ion-content>

Emilien · Accepted Answer · 2020-01-09 13:29:24Z

1

The fact is that your getUserDetails()function don't seems to be called.

Could you try something like :

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { catchError, tap, map, pluck } from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getUsers()
  {
    return this.http.get('http://localhost:3000/api/con_users').pipe(pluck('data');
  }

}

In your component.ts :

export class ProfilePage  {
  userDetails$ = this.apiService.getUsers();

  constructor(public apiService:ApiService) {}
}

So that in your component.html :

<ion-list>
  <ion-item *ngFor="let user of userDetails$ | async">
    {{user.email}}
  </ion-item>
</ion-list>

edited Jan 9, 2020 at 13:29

answered Jan 9, 2020 at 13:20

Emilien

2,7534 gold badges17 silver badges29 bronze badges

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

4 Comments

Ebrahim Mithaiwala Over a year ago

Its giving error on browser console that - Failed to load resource: net::ERR_CONNECTION_REFUSED core.js:9110 - ERROR HttpErrorResponse

Emilien Over a year ago

@EbrahimMithaiwala Does the URL you provide is the good one ? Have you started your server on port 3000 ?

Ebrahim Mithaiwala Over a year ago

Yup the api url is good and its my own api and yes its on 3000 port

Emilien Over a year ago

What do you get if you do this.userDetails$.subscribe(console.log) ? Please update your post with the output.

Collectives™ on Stack Overflow

Not able to connect and fetch details from api http calls in ionic and angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related