I'm working with Ionic 3, getting data through a Restfull API, using PHP and MySQLi, but returns this error:
Unexpected end of JSON input.
I believe the error is in the API. Here is my code:
In the API - app-produtos.php
<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
$conn = mysqli_connect('localhost','fitstyle_adm','jh060681','fitstyle_system');
$sql = "SELECT * FROM produtos";
$qr=mysqli_query($conn,$sql);
$arr = array();
while ($ft=mysqli_fetch_array($qr)) {
$arr[] = $ft;
}
echo json_encode($arr);
Follow the codes for the TypeScript files:
Page that receives data:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ProdutosProvider } from "../../providers/produtos/produtos";
/**
* Generated class for the LojaPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-loja',
templateUrl: 'loja.html',
})
export class LojaPage {
produtos=[];
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private produtosProvider: ProdutosProvider
) {
}
ngOnInit() {
this.produtosProvider.getProdutos().subscribe(response => {
console.log(response);
var res = JSON.parse((response as any)._body);
this.produtos = res.data;
console.log(this.produtos);
}, error=> {
console.log(error);
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad LojaPage');
}
}
HTML Page:
<ion-header>
<ion-navbar>
<ion-title>loja</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div *ngFor="let produto of produtos">
{{produto.nome_produto}}
</div>
</ion-content>
PROVIDER:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the ProdutosProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular DI.
*/
@Injectable()
export class ProdutosProvider {
constructor(public http: Http) {
console.log('Hello ProdutosProvider Provider');
}
getProdutos(){
return this.http.get("http://localhost/app-produtos.php");
}
}