Tansformate a JSON response in a list and display the data on the screen with IONIC

Asked

Viewed 561 times

2

Good afternoon guys, whenever I have any doubts I run here hoping you will help me and always get positive answers, from now on my many thanks.

Well, I have a little problem here (I don’t have much affinity with typescript). I am receiving a Json object as a response and need to put these items in this array and pass to a component on the screen.

The return Json

[
    {
        "distancia": "0.0000000000",
        "resultado": "9551, FRANCISCO CAVALCANTE LACERDA-LACERDOPOLIS, G019688"
    },
    {
        "distancia": "0.0000000000",
        "resultado": "9552, FRANCISCO CAVALCANTE LACERDA-LACERDOPOLIS, G019689"
    },
    {
        "distancia": "0.0000000000",
        "resultado": "9553, FRANCISCO CAVALCANTE LACERDA-LACERDOPOLIS, Z118507"
    },
    {
        "distancia": "0.0000000000",
        "resultado": "9554, ROSA DOS VENTOS-LACERDOPOLIS, Z013630"
    },
    {
        "distancia": "0.0900949795",
        "resultado": "9557, ALTEMAR DUTRA-HELIOPOLIS, G019695"
    },
    {
        "distancia": "0.0900949795",
        "resultado": "9558, ALTEMAR DUTRA-HELIOPOLIS, G019693"
    },
    {
        "distancia": "0.0900949795",
        "resultado": "9550, FRANCISCO CAVALCANTE LACERDA-LACERDOPOLIS, G019687"
    },
    {
        "distancia": "0.0900949795",
        "resultado": "9556, ROSA DOS VENTOS-LACERDOPOLIS, G019573"
    },
    {
        "distancia": "0.0900949795",
        "resultado": "9555, ROSA DOS VENTOS-LACERDOPOLIS, G019694"
    },
    {
        "distancia": "0.1274138708",
        "resultado": "9559, ALTEMAR DUTRA-HELIOPOLIS, G019572"
    }
]

Where I need to view json data

<ion-list>
  <ion-item>
    <ion-label>Postes</ion-label>
    <ion-select [(ngModel)]="postes">
      <ion-option *ngFor="let lista_postes of lista_postes; let i = index;" value={‌{lista_postes}}>{‌{ i + lista_postes}}</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

Method that submits the information to the server and receives as return a Json, which would have to popular this list.

submitCadastroNotification() {
  var _link = 'http://www.baseterritorial.com.br/desktop/projetos/baselumina/baselumina.app.php?baselumina_mobile=';
  var _data = JSON.stringify({
    acao: "localizar",
    uuid: this.uuid,
    barramento: this.barramento,
    latitude: this.latitude,
    longitude: this.longitude,
  });
  console.log(_data);
  //iniciando conexão HTTP para cadastro do usuário via JSON
  this.http.post(_link + _data)
    .subscribe(_data => {
      this.data.response = _data._body;
      this.lista_postes.push(this.data.response);

      console.log(this.lista_postes);

      //console.log(this.data.response);
    }, error => {
      console.log("Ocorreu algum erro!");
    });
}
typescript ionic2 ionic3

1 answer

1

It seems your problem is on this line:

<ion-option *ngFor="let lista_postes of lista_postes; let i = index;" value={‌{lista_postes}}>{‌{ i + lista_postes}}</ion-option>

*ngFor acts as a foreach in other languages, in this case the let lista_postes defines a variable called lista_postes for every post listing, anything strange? Yeah, the name of the for variable, (let lista_postes) should have a different name, so you can access each of the object keys in the array, for example:

<ion-option *ngFor="let poste of lista_postes; let i = index;" value={‌{poste.distancia}}>{‌{ i +' '+ post.resultado}}</ion-option>

More information: https://angular.io/api/common/NgForOf

Browser other questions tagged typescript ionic2 ionic3

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