I can not get Json on Ionic

Question

I can not get Json on Ionic

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

I'm having trouble getting the data of my own api and reading them in the ionic app, basically I do not get an error, the get occurs on the server with code 200, but in the app I do not receive anything, thanks for the help

JSON response

[
 {
 "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>

javascript json ionic angular4

asked by Emanuel Cortez 17.01.2018 в 21:18

source

4 answers

Run two functions in setTimeout How to modify the webconfig connection string from the controller

score 1 · Answer 1

I was reviewing your code, partner. It would be excellent if you shared what the console.log(data) of rest.ts would bring with it. What can help you is that in home.ts you declare your variable users: any and initialize it with an empty array in the following way:

users: any[] = [];

Since, data brings an array of objects and will store them in your variable users already initialized as an array. In this way you can start using the different attributes.

I hope it serves you, greetings.

score 0 · Answer 2

0

You may also try to do the following to get the promise:

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

answered by 24.01.2018 в 23:07

score 0 · Answer 3

According to the code that you sent the only one is that in: rest.js in the method getUsers() are not returning the parameters.

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);
       });
   });
}

Does the console.log of rest.js print something on the console?

You can check your application is well received with the application "POSTMAN" that shows you how you are getting the data.

I hope I have been of help.

score 0 · Answer 4

You are missing the .map

I'll give you an example of a code I did recently

let address = this._conexion.Url + "seller / pin /" + number;

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

});

Complete code and commented on

link