Well, as the title says, I'm trying to consume a rest API with Ionic 3 and for some strange reason, my browser does not show me the array that returns the api, the strange thing is that the console is shown, I thought that I had syntax error or something similar in the code but I followed it in a tutorial then I did it with a very different and different code and it does not matter, I also tried with another API and it's still the same, only seen in console, I already tried with another browser and it does not work either.
This is my code where I call the url of the api
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
@Injectable()
export class PrRutasProvider {
route:any='https://apibancov2.azurewebsites.net/api';
constructor(public http: HttpClient) {
}
get_route(){
return this.route;
}
}import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
import {PrRutasProvider} from '../pr-rutas/pr-rutas';
/*
Generated class for the PrUsuarioProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class PrUsuarioProvider {
route_url:any;
usuario:any;
constructor(public http: HttpClient, private pr_rutas:PrRutasProvider) {
this.route_url=this.pr_rutas.get_route();
console.log('Hello PrUsuarioProvider Provider');
}
set_usuario(value){
this.usuario=value;
}
get_usuario(){
return this.usuario;
}
get_todos_usuarios():Observable<any>{
return this.http.get(this.route_url+"/clientes");
}The home.ts to later show the data
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {PrUsuarioProvider} from '../../providers/pr-usuario/pr-usuario';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
result_usuario:any;
usuario:any={
id:''
}
constructor(public navCtrl: NavController, public navParams: NavParams, public pr_usuario:PrUsuarioProvider) {
}
ionViewDidLoad() {
this.get_todos_usuarios();
}
crear_usuario(){
this.navCtrl.setRoot('CrearUsuarioPage');
}
get_todos_usuarios(){
console.log('ionViewDidLoad HomePage');
this.pr_usuario.get_todos_usuarios().subscribe(
pr_usuario => {
let data=pr_usuario;
console.log(data);
if(data.mensaje=='no hay datos') {
console.log('no hay datos');
this.result_usuario=null;
console.log(this.result_usuario);
}else{
this.result_usuario=data.data;
}
},
err => {console.log("NO EXISTE REGISTRO");
},
);
}And here I try to show them but they only look at the console and not in the normal browser view
<ion-header>
<ion-navbar>
<ion-title>home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let item of result_usuario">
<div>{{item.nombre}}</div>
<div>{{item.apellido}}</div>
<div>
<button ion-button (click)="editar(item.id)">Editar</button>
<button ion-button (click)="eliminar(item.id)">Eliminar</button>
</div>
</ion-item>
</ion-list>
<button ion-button (click)="crear_usuario()">Crear Usuario</button>
</ion-content>