Listing of MySql database on Ionic application page

@lado wrote:

Hello,

I’ve start using ionic2 framework and TypeScript.

Trouble with listing of mySql database located on remote server in ionic2 application page.

my list.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@IonicPage()
@Component({
  selector: 'page-list',
  templateUrl: 'list.html',
})
export class ListPage {
public names: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
    this.load();
  }
  load() {
  return new Promise(resolve => {
    this.http.get('http://site/query.php')
      .map(res => res.json())
      .subscribe(data => {
        this.names = data;
        console.log(this.names);
        resolve(this.names);
      });
  });
}
}

list.html shows database as single string with quotes and brackets:

<ion-list>
  <ion-item text-wrap *ngFor="let name of names">
    {{ names }}
  </ion-item>
</ion-list>

with chrome inspect console debug output of database without errors and json directly by query.php:

JkkAX.png963x441 35.8 KB

If php part works proper, problem must be between list.ts and list.html

below Inspect console shows database content without errors, but list.html is empty:

<ion-list>
   <ion-item text-wrap *ngFor="let name of names">
     {{ name.Name }}
     {{ name.Email }}
   </ion-item>
 </ion-list>

loading of list from provider works fine and shows list.html listing as needed:

ionViewDidLoad(){
     this.names = this.data.lists;
}

Also I’ve tried it differently, but this way console outputs just “getNames completed” without database string:

load()
  {
    this.http.get('http://site/query.php').subscribe(
      data => { this.names = data.json();
      this.names = Array.of(this.names);
       },
      err => console.error(err),
      () => console.log('getNames completed')
      );
   }

Any advice would be helpful

Posts: 1

Participants: 1

Read full topic