JSON中的意外令牌&lt;在JSON.parse位置0处（ <anonymous> ）

Question

I know this topic already exist on this platform. I have searched through online but I didn't get the rightful answer pertaining to my problem.

I created a login page which needs to access API but every time I clicked on the Login button the error comes out.

I have tried different ways but still couldn't figure it out.

Below is my source codes:

Login.html

<ion-content  class="login-content" padding>
  <ion-row class="logo-row">
    <ion-col></ion-col>
    <ion-col >
      <img src="../assets/imgs/logo.png" class="img-responsive " id="img2">
    </ion-col>
    <ion-col></ion-col>
  </ion-row>
  <form (submit)="doLogin()">
    <ion-item>

      <ion-input [(ngModel)]="credentials.email" name="email" type="text" placeholder="Email Address" ></ion-input>
    </ion-item>
    <ion-item>
       <ion-input [(ngModel)]="credentials.password" name="password" type="password" placeholder="Password"></ion-input>
    </ion-item>
    <button ion-button class="submit-btn" block type="submit">
      Login
    </button>
  </form>

  <button ion-button class="register-btn" block clear (click)="register()">
    Create New Account
  </button>
</ion-content>

AuthServive.ts

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

let apiUrl = 'http://localhost:90/mySchool/api2/get.php?';

@Injectable()
export class AuthService {

  constructor(public http: Http) {}

  login(credentials) {

    let urlDest = "http://localhost:90/mySchool/api2/get.php?username=" + credentials.email + "&password=" + credentials.password;
    return this.http.get(urlDest)
              .map( (res:Response) => res.json());


   /* return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        this.http.post(apiUrl+'login', JSON.stringify(credentials), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });*/
  }

  register(data) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post(apiUrl+'guest/signup', JSON.stringify(data), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }

  logout(){
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('X-Auth-Token', localStorage.getItem('token'));

        this.http.post(apiUrl+'logout', {}, {headers: headers})
          .subscribe(res => {
            localStorage.clear();
          }, (err) => {
            reject(err);
          });
    });
  }

}

Login.ts

import { Component } from '@angular/core';
import { NavController, LoadingController, ToastController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import { TabsPage } from '../tabs/tabs';
import { RegisterPage } from '../register/register';
import { HomePage } from '../home/home';

export class User {
  email: string;
  password: string;
}

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

  credentials: User = {
    email: '',
    password: ''
  }



  items:any;

  loading: any;
  //loginData = { email:'', password:'' };
  //data: any;

  constructor(public navCtrl: NavController, public authService: AuthService, public loadingCtrl: LoadingController, private toastCtrl: ToastController) {}

  doLogin() {
    //this.showLoader();

    this.authService.login(this.credentials)
                    .subscribe(
                        datas => {
                          //this.loading.dismiss();
                              if(datas.result){
                                this.navCtrl.push(HomePage, {
                                      email: datas.data.id
                                  })

                              }else{ 

                              alert("Invalid user or password")


                              }
        });

    /*this.authService.login(this.loginData).then((result) => {
      this.loading.dismiss();
      this.data = result;
      localStorage.setItem('token', this.data.access_token);
      this.navCtrl.setRoot(TabsPage);
    }, (err) => {
      this.loading.dismiss();
      this.presentToast(err);
    });*/
  }

  register() {
    this.navCtrl.push(RegisterPage);
  }

  showLoader(){
    this.loading = this.loadingCtrl.create({
        content: 'Processing...'
    });

    this.loading.present();
  }

  presentToast(msg) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom',
      dismissOnPageChange: true
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }

}

get.php

<?php

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


   // Set up the PDO parameters
$Mysqli = new mysqli('127.0.0.1', 'root', '', 'cihmeeting');





      $login = addslashes($_GET['email']);
      $Tsenha = addslashes($_GET['password']);
      //$senha= md5($Tsenha);

      $erro = "";
      $erro .= empty($login) ? "Enter your email \n" : "";
      $erro .= empty($senha) ? "Enter your password \n" : "";

      $arr = array();

      if(empty($erro)){
         $query = "SELECT * FROM users WHERE email = '$login' and password = '$Tsenha'";
         $result = $Mysqli->query($query);

         if($result->num_rows > 0){
            //login Logged
            $obj = $result->fetch_object();

            $arr['result'] = true;
            $arr['data']['id']         = $obj->id;
            $arr['data']['zone_code']      = $obj->zone_code;
            $arr['data']['first_name']       = $obj->first_name;
            $arr['data']['email']  = $obj->email;
         }else{
            $arr['result'] = false;
            $arr['msg'] = "Invalid login details";
         }
      }else{
         $arr['result'] = false;
         $arr['msg'] = $erro;
      }

      echo json_encode($arr);

?> 

Could someone please point me to the right direction.

Answer 1

It's because your API doesn't return valid JSON response. You should catch these errors:

login(credentials) {
  let urlDest = "http://localhost:90/mySchool/api2/get.php?username=" + credentials.email + "&password=" + credentials.password;

  return this.http.get(urlDest)
             .map( (res:Response) => res.json())
             .catch(error => {
               // handle error here
               console.log('Server error');
             });
}