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

1

Good afternoon everyone, whenever I have any doubts I run here in the hope that you help me and I always get positive answers, from now on thank you very much.

Well, I have a little problem here (I do not have much affinity for typescript). I'm getting an object in Json as a response and I need to put these items in this array and move 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 do I need to display 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>

A method that submits the information to the server and receives as a return a Json, which would have 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!");
    });
}
    
asked by anonymous 23.02.2018 / 16:59

1 answer

0

It looks like your problem is in this line:

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

The * ngFor functions as a foreach in other languages, in which case the let lista_postes defines a variable called lista_postes for each list_postes, something strange? That is, the for variable name, ( let lista_postes ) should have a different name, so you can access each of the object's 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: link

    
15.10.2018 / 22:37