I am trying to get data from my MySQL database via PHP and display information on Ionic 2 list. I can view my object (data) in the chrome console but i get the following error “Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.”
My Php Code is
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$conn = new mysqli("localhost", "root", "root", "Northwind");
$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
}
$outp = '{"records":['.$outp.']}';
$conn->close();
echo($outp);
?>
My page.html
<ion-content> <ion-list> <ion-item *ngFor="let person of people" > <h2>{{person.Name}}</h2> </ion-item> </ion-list> </ion-content>
ANd page.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-newcars',
templateUrl: 'newcars.html'
})
export class NewcarsPage {
public people: any;
public tom: any;
constructor(public navCtrl: NavController, public http: Http) {
this.loadPeople();
}
loadPeople(){
this.load();
}
ionViewDidLoad() {
console.log('Hello NewcarsPage Page');
}
load() {
return new Promise(resolve => {
this.http.get('http://54.89.250.225/customers_mysql.php')
.map(res => res.json())
.subscribe(data => {
this.people = data;
console.log(this.people);
// resolve(this.people);
});
});
}
}
And my PHP page returns this
Preformatted text{"records":[{"Name":"Tom","City":"Suva","Country":"Fiji"},{"Name":"Jerry","City":"Labasa","Country":"Australia"}]}