ERROR SyntaxError: Unexpected token < in JSON at position 0(Ionic2)

Ionic Framework ionic-v3
1

I register the data to the database.Then I want to list the data but I get an error.I do not understand where I’m making mistakes
list.html


<ion-header>

  <ion-navbar>
    <ion-title>list</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-list>
    <ion-item *ngFor="let isim of dataisim">{{isim}}</ion-item>
  </ion-list>

</ion-content>

list.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ServiceProvider} from "../../providers/datamember";
import { Http, Headers, Response, ResponseOptions } from '@angular/http';

@IonicPage()
@Component({
  selector: 'page-list',
  templateUrl: 'list.html',
})
export class ListPage {

 
  dataisim : any;

  constructor(public navCtrl: NavController, public navParams: NavParams,public service:ServiceProvider,
  public http : Http) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListPage');

      this.service.getList().subscribe(data =>
         this.dataisim = data );
         console.log(this.dataisim);
}


}

service.ts


import { Injectable } from '@angular/core';
import { Http, Headers, Response, ResponseOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Storage } from '@ionic/storage';

@Injectable()
export class ServiceProvider {
      public local : Storage;
       mydata : any;
      api : string = 'http://localhost:8080/ionic2_kaydet.php';
      api2 : string = 'http://localhost:8080/kaydet3.php';
      url : string = "http://localhost:8080/listele.php";

  constructor(public http: Http) {       
  }
 postLogin(data){
       console.log("api data:" + data);
          let headers = new Headers({ 'Content-Type' : 'application/x-www-form-urlencoded' });
            return this.http.post(this.api, data, {
                  headers:headers,
                  method:"POST",                  
            }).map(
                  (res:Response) => {return res.json();}
            );
  }

  getList() {

          let headers = new Headers({ 'Content-Type' : 'application/x-www-form-urlencoded' });
            return this.http.get(this.url, {
                  headers:headers,
                  method:"GET",                  
            }).map(
                  (res:Response) => {return res.json();}
            )
  }

}

listele.php

<?php

header("Access-Control-Allow-Origin: *");

$conn = new mysqli("localhost", "root", "", "ionic2");
    $data= array();
    $select = "select * from user2";
    $qr = $conn->query($select);
    while($row = $qr->fetch_assoc()){
        $data[]=$row;
    }
print json_encode($data);
?>
2

Use Chrome’s debugging tools’s network tab to see what is going over the wire. I expect some sort of error is being returned as HTML instead of JSON.

3

What appears in my networktab : [{“id”:“24”,“username”:“onur”,“password”:“3456”}]
As if there was no mistake

4

Instead of blindly calling json() on the response, you could try logging the result of res.text(). That should let you see what it’s trying to unmarshal.

5

For my own debugging practice, I get used to add “console.log(…)” for some critical data.