View Angular + Json ionic 3

0

I'm trying to display json from a search in my app, but I do not know how to do that.

hereisintheappdisplayingintheconsole,butwantedtodisplayintheapp myhtmlcode

<ion-header><ion-navbar><buttonion-buttonmenuToggle><ion-iconname="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>

ts code

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

    
asked by anonymous 06.03.2018 / 20:56

1 answer

0

If your provider is returning to you a Json, then the correct thing is you turn json into an object, so you can interact with 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();
} 

As for the on-screen display you can use it in the view:

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