Listing of MySql database on Ionic application page

Ionic Framework ionic-v3
1

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

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

This way 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;
}

Not sure, how to figure out, what is wrong here or find some example, any advice would be helpful

2

You are receiving the data in bad format, you can see in the console log that all data is a string at the position 0, the json is not well constructed. Check the server side code.

3

Hello, JoseM! Thank you for you answer. I have added server side query.php to the post, not sure, what is wrong there. For this project I can not use the PDO extension or Node.js environment

4

This is a server side issue and is not related with Ionic.

Try this code, but if it doesn’t work you have to search on internet or ask elsewhere (StackOverflow)

$q = mysqli_query("SELECT ID, Name,Email FROM tablename");
$rows = array();
while($r = mysqli_fetch_assoc($q)) {
    $rows[] = $r;
}
echo json_encode($rows);
1 Like
5

This way ERROR SyntaxError: Unexpected token < in JSON at position 0

6

Show the console log of the network call

7

Error was by another reason, your code works fine, thank you JoseM, big support