Error Unexpected end of JSON input

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");
    }
}