Listing of MySql database on Ionic application page


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';

  selector: 'page-list',
  templateUrl: 'list.html',
export class ListPage {
public names: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
  load() {
  return new Promise(resolve => { 
      .map(res => res.json())
      .subscribe(data => {
        this.names = data;

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

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

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


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-item text-wrap *ngFor="let name of names">
     {{ name.Name }}    
     {{ name.Email }}   

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

     this.names =;

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

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.

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

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

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

Show the console log of the network call

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