0

Estoy teniendo problemas para obtener los datos de una api propia y leerlos en la app ionic, basicamente no obtengo error, el get se produce en el servidor con codigo 200, pero en la app no recibo nada, gracias por la ayuda

Respuesta JSON

[
 {
 "id": 1,
 "username": "Emanuel",
 "email": "emanuel",
 "password": "123",
 "created_at": "2018-01-17T12:04:43.000Z",
 "updated_at": "2018-01-17T12:04:43.000Z"
 }
]

rest.js

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

@Injectable()
 export class RestProvider {

  constructor(public http: HttpClient) {
   console.log('Hello RestProvider Provider');
  }

 apiUrl = 'http://localhost:3000';

 getUsers(){
  return new Promise(resolve => {
    this.http.get(this.apiUrl+'/users').subscribe(data => {
        console.log(data);
    }, err => {
        console.log(err);
    });
  });
 }
}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public restProvider: RestProvider) {
  	this.getUsers();
  }

  users: any;

  getUsers() {
  	this.restProvider.getUsers()
  	.then(data => {
  		this.users = data;
  		console.log(this.users);
  	});
  }

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Probando Rest
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let user of users">
      <h2>{{user.username}}</h2>
      <p>{{user.email}}</p>
    </ion-item>
  </ion-list>
</ion-content>

4 respuestas 4

1

Estuve revisando tu código, compañero. Sería excelente que nos compartieras lo que traer consigo el console.log(data) de rest.ts. Lo que puede ayudarte es que en home.ts declararas tu variable users: any y la inicialices con un array vacio de la siguiente forma:

users: any[] = [];

Ya que, data trae un array de objetos y los almacenara en tu variable users ya inicializada como un array. De esta forma podrás empezar a utilizar los diferentes atributos.

Espero te sirva de algo, saludos.

0

Tambien podrias intentar hacer lo siguiente para obtener la promesa:

getUsers(){
    return this.http.get(this.apiUrl+'/users').toPromise()
}
0

Según el código que enviaste el único es que en: rest.js en el método getUsers() no estás devolviendo los parámetros.

getUsers(){
   return new Promise(resolve => {
      this.http.get(this.apiUrl+'/users').subscribe(data => {
         console.log(data);
         resolve(data); //agrega esta linea
       }, err => {
       console.log(err);
       });
   });
}

¿El console.log de rest.js te imprime algo en consola?

Puedes revisar tu solicitud se recibe bien con la aplicación "POSTMAN" que te muestra como te están llegando los datos.

Espero haberte sido de ayuda.

0

Te falta el .map

Te dejo un ejemplo de un código que hice hace poco

let direccion = this._conexion.Url + "vendedor/pin/" + numero;

        this.http.get(direccion)
      .map(res => res.json())
      .subscribe(data =>{
              if(!data){ 
                  Console.log(data)
                 }

});

Código completo y comentado en

https://github.com/waleman/EquatePro/tree/master/EquatePro/src/pages/login

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.