View Angular + Json Ionic 3

Asked

Viewed 451 times

0

I’m trying to display the json of a search in my app,. inserir a descrição da imagem aqui

here is in the app displaying on the console, but wanted to display in the app inserir a descrição da imagem aqui my html code inserir a descrição da imagem aqui

    <ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Agenda
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding id="page10">

  <form (ngSubmit)="logForm()">

  <ion-list>

      <ion-item>
        <ion-input type="text" [(ngModel)]="cpf" name="cpf"> </ion-input>
      </ion-item>    
    </ion-list>
    <div ng-repeat="pesquisar"></div>
    <div>
      <button ion-button type="submit">Pesquisar</button>
    </div>

  </form>

</ion-content>

code of ts

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

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

  user: any;
  cpf: any;

  constructor(
    public navCtrl: NavController,
    private buscarProvider: BuscarProvider
  ) {
  }

  logForm() {
    this.buscarProvider.buscar(this.cpf)
    .then(
      (result: any) => {
        for (var i = 0; i < result.success.length; i++) {
          var user = result.success[i];        
          this.user.push(user);
        }
      }
    )
    .catch();
  }
}

inserir a descrição da imagem aqui

1 answer

0

If your Fortune Teller is returning a Json to you, then the correct thing is to turn the json into an object, so that you can interact on it.

export class AgendaPage {

 users =new Array<any>();//Criando um Array
 cpf: any;

 constructor(public navCtrl: NavController, private buscarProvider: BuscarProvider ){}

logForm() 
{
   this.buscarProvider.buscar(this.cpf)
  .then(
   (result: any) => 
    {
      var result= JSON.parse(result);
      const x = result.success;
      this.users = x;        
    }
 ).catch();
} 

When displaying on the screen you can use in the view:

<ion-list *ngFor="let user of users">
 <h2>{{user.nome}}</h2>
 </ion-list>
</ion-content>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.