JSON中位置Ionic处的意外令牌<

Question

I'm working on a project using Ionic 2 framework, but I'm getting an error of Unexpected token < in JSON at position 0 home.ts:37, whenever I submit a form input into my MySQL database. I have checked my ports, all working fine. What could be causing the issue?

full error

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Response.Body.json (http.es5.js:800)
    at MapSubscriber.project (service.ts:28)
    at MapSubscriber._next (map.js:77)
    at MapSubscriber.Subscriber.next (Subscriber.js:89)
    at XMLHttpRequest.onLoad (http.es5.js:1229)
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:4119)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)

launch.json

    {

    "version": "0.2.0",
    "configurations": [

        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}",
            "outFiles": [
                "${workspaceRoot}/out/**/*.js"
            ]
        }
    ]
}

Here's my code:

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Agregar producto
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="insertar" (ngSubmit)="InsertarProducto()">
            <ion-list>
                  <ion-item>
                        <ion-label floating>nombre</ion-label>
                        <ion-input type="text" name="nombre" formControlName="nombre" ></ion-input>
                  </ion-item>
                  <ion-item>
                        <ion-label floating>stock</ion-label>
                        <ion-input type="text" name="stock" formControlName="stock" ></ion-input>
                  </ion-item>
                      <button  [disabled]="insertar.invalid" ion-button full block color="secondary">Enviar</button>
            </ion-list>
  </form>

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ServiceProvider } from '../../providers/service/service';
import { FormBuilder, Validators } from '@angular/forms';
import { ToastController } from 'ionic-angular';


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

  insertar : any = {};

  constructor(public navCtrl: NavController , public service : ServiceProvider, public formB : FormBuilder,  public toastCtrl: ToastController) 
  {

            this.insertar = this.formB.group({
             nombre:['', Validators.required],
             stock:['', Validators.required] 
            });
   }



   InsertarProducto(){

      /*let toast = this.toastCtrl.create({
      message: 'Usuario agregado correctamente',
      duration: 3000
    });*/

    this.service.InsertarProd(this.insertar.value)
    .subscribe(
      data=> console.log(data.mensage), //toast.present()
      err=> console.log(err));
  }




}

service.ts

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


/*
  Generated class for the ServiceProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class ServiceProvider {

    api : string = 'http://localhost:8080/ING/';

  constructor(public http: Http) {
    console.log('Hello ServiceProvider Provider');
  }

   InsertarProd(params){
             let headers = new Headers({'Content-Type':'application/x-www-form-urlencoded'});
           return this.http.post(this.api + 'insertarprod.php' , params,{ 
           headers:headers,
           method:"POST",
         }).map(
           (res:Response)=>{return res.json();}
         )
  }


}

insertarprod.php

<?php

header("Access-Control-Allow-Origin:http://localhost:8100");
header("Content-Type: application/x-www-form-urlencoded");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

    $data = file_get_contents("php://input");
    $objData = json_decode($data);



    $nombre = $objData->nombre;
    $stock = $objData->stock;


    $nombre = stripslashes($nombre);
    $stock = stripslashes($stock);

    $nombre = trim($nombre);
    $stock = trim($stock);

    $datos; 

    @$db = new PDO("mysql:host=localhost;dbname=aula", "root", "");


    $prueba = array('mensaje2' => "conexion correcta");
    echo json_encode($prueba);

    if($db){
        $sql = " insert into productos values(NULL,'".$nombre."','".$stock."')";
        $query = $db->prepare($sql);
        $query ->execute();
        if(!$query){
                   $datos = array('mensage' => "no fue posible insertar datos");
                   echo json_encode($datos);
         }
        else{
                   $datos = array('mensage' => "Datos ingresados correctamente");
                  echo json_encode($datos);
         };
    }
   else{
          $datos = array('mensage' => "No es posible insertar datos.");
          echo json_encode($datos);
    };

    ?>

Answer 1

Copy/paste your JSON into a validator, like this one: https://jsonformatter.curiousconcept.com/

If you're still unable to find it, share the JSON with us in the question.

Answer 2

Your json is valid except the comment: https://jsonlint.com/ See: Can comments be used in JSON? about comments in json files.

Answer 3

For some reason my XAMPP SQL port at 3307 was causing the error. I changed it back to 3306 and my code worked with 0 JSON errors.