Make a Select-List with Database Data

Ionic Framework ionic-v3
1

I’m having trouble making a select-list with data from the database.
I followed some internet tutorials, but to no avail.
If someone can post an example or point out what I am wrong.
I will be very grateful, therefore, I must do when loading page 3 Select-lists.

auth_pagto.ts

empresa(user) {
        //user.sidBanco = "bda1";
        var headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=utf-8');

        return new Promise(resolve => {
            this.http.post('/itpowerbr-api/login/empresa', JSON.stringify(user), {headers: headers}).subscribe(data => {
                  console.log("ENTROU");

                  var mostraEmpresa: any[];
                  //lista das empresas
                  data.json().each(data, function(i, x){
                      //mostraEmpresa += '<ion-option value="'+ x.empresaNome +'" >'+ x.empresaID +' - '+ x.empresaNome +'</ion-option>';
                      //{description: "Fazer compras", priority: "7", horary: "22:20"},
                      this.mostraEmpresa = [
                        {description: x.empresaNome, priority: x.empresaID}
                      ];
                  });
                  //$("#pgt-lista-filial").html(mostraEmpresa);
                  resolve(mostraEmpresa);
            }, (err) => {
              if ( err.status == 500 ){
                var alert = this.alertCtrl.create({
                          title: "Pagamentos",
                          subTitle: "Lista Empresa não Encontrada",
                          buttons: ['ok']
                      });
                alert.present();
                resolve(false);
              }else{
                var alert = this.alertCtrl.create({
                          title: "Pagamentos",
                          subTitle: err,
                          buttons: ['ok']
                      });
                alert.present();
                resolve(false);
              }
            });


        });



    }// fim

> pagamento.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, LoadingController } from 'ionic-angular';
import { Auth_Pgto } from './auth_pgto';
import { AuthService } from '../login/authservice';
import { Storage } from '@ionic/storage';

import { LoginPage } from '../login/login';

@IonicPage()
@Component({
  selector: 'page-pagamentos',
  templateUrl: 'pagamentos.html',
})
export class PagamentosPage {

  usercreds = {
      //nomeUsuario: '',
      //token: ''
    };

  private _lista: any;

  constructor(public navCtrl: NavController, public storage: Storage, public navParams: NavParams, public authservice: AuthService, public auth_pgto: Auth_Pgto, public alertCtrl: AlertController, public loadingCtrl: LoadingController) {
    var usuario = new Object();
    usuario = {
      nomeUsuario: window.localStorage.getItem('usuario'),
      token: window.localStorage.getItem('raja')
    };

    this.auth_pgto.empresa(usuario).then(data => {
      this._lista = data;
    });

  }// fim

  logout() {
        this.authservice.logout();
        this.navCtrl.setRoot(LoginPage);
  }

  public event = {
    month: '2017-07-01',
    timeStarts: '07:43',
    timeEnds: '1990-02-20'
  }



  ionViewDidLoad() {
    console.log('ionViewDidLoad PagamentosPage');
  }

}

> pagamentos.html

>   <ion-list> <!-- LISTA EMPRESA -->
>     <ion-item *ngFor="#_lista of _lista">
>       <ion-label>Empresa</ion-label>
>       {{lista.description}}
>     </ion-item>
>   </ion-list>

> </ion-content>

thank you so much.

2

Several things could be improved here.

  • All function parameters and return values should be typed.
  • Do not explicitly instantiate a Promise in empresa(), and your each() is overwriting an object property that should not even exist. Instead, do something like this:
export interface Empresa {
  description: string;
  priority: string;
}

export class AuthPgto {
  empresa(): Observable<Empresa[]> {
    return this.http.post(url, user)
      .map(rsp => rsp.json())
      .map(raw => raw.map(rawe => {description: rawe.empresaNome, priority: rawe.empresaID}));
  }
}

Move all the error handling out of the service provider and into the page. Note the change in class name. Underscores as spaces are not in line with customary JavaScript naming conventions.

  • Use ionic-storage instead of window.localStorage.
  • Nothing referenced from templates may be private. _lista needs to be publicly accessible.
  • Stop abusing any.
3

I did not quite understand how to use your method.
Could detail more please, I’m new to ionic.

Thank you @rapropos

4

The way I learned when I was new is: I bought Josh Morony’s book on Ionic; I bought the FullstackIO book on Angular; and I read the source code of the official Ionic projects on Github. If you do those three things, you’ll get good fast.

5

I learn fast, the problem is that I do not have much time.
I made a webservice, my own api, I can communicate and work the data with my oracle database.

But it seems that I stuck in a simple thing.
My question is this.

I do not know how to get this list that is being returned to me in json from the database and popular it in a Select-list.

If anyone can show me a simple example in this format, I can already become well.

Thank you everyone for the attention.