Ionic + PHP: Unexpected token < in JSON at position 0 at JSON.parse

Question

I have seen loads of topics with the same error, but I still couldn't fix my issue... I'm not sure how specific it is, so maybe you can help me.

This is what my php file looks like:

if(isset($_POST)){

    $username = $_POST["username"];
    $email = $_POST["email"];
    $password = $_POST["password"];

    $sql = 'insert into users(username, email, password) values("' . $username . '", "' . $email . '", "' . $password . '")';

    if($conn->query($sql) === true){
        $output = "Inserted " . $username;

        echo json_encode($output);
    } else{
        echo json_encode("Error: " . $conn->error);
    }

} 

and my provider:

writeTable(u, e, p) : Promise<any>{

let url = "http://localhost/gameon-server-side/create.php";

let param = { username: u, email: e, password: p};

let request = this.http.post(url, param);

return request.toPromise();

}

my template:

<ion-row>
    <ion-col text-center>

        <p>Response:</p>
        <p>{{responseTxt}}</p>

        <button ion-button (click)="showTable()"> Read from table </button>

        <ion-input class="txt" type="text" placeholder="Enter Username" [(ngModel)]="userName"></ion-input>
        <ion-input class="txt" type="text" placeholder="Enter Email" [(ngModel)]="userEmail"></ion-input>
        <ion-input class="txt" type="text" placeholder="Enter Password" [(ngModel)]="userPassword"></ion-input>

        <button ion-button (click)="addTable(userName, userEmail, userPassword)"> Insert </button>
        <button ion-button> Update </button>
        <button ion-button> Delete </button>

    </ion-col>
</ion-row>

and finally my component:

addTable(u, e, p){
this.network.writeTable(u, e, p)
.then(data => {
  console.log("I received: " + JSON.stringify(data));
  this.responseTxt = ""+ JSON.stringify(data);
})
.catch(e => {
console.log(e);

})

}

and the error:

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost/gameon-server-side/create.php", ok: false, …}
error
:
error
:
SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:8100/build/vendor.js:61165:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4973:33) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) at r.runTask (http://localhost:8100/build/polyfills.js:3:10834) at e.invokeTask [as invoke] (http://localhost:8100/build/polyfills.js:3:16794) at p (http://localhost:8100/build/polyfills.js:2:27648) at XMLHttpRequest.v (http://localhost:8100/build/polyfills.js:2:27893)
message
:
"Unexpected token < in JSON at position 0"
stack
:
"SyntaxError: Unexpected token < in JSON at position 0↵    at JSON.parse (<anonymous>)↵    at XMLHttpRequest.onLoad (http://localhost:8100/build/vendor.js:61165:37)↵    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)↵    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4973:33)↵    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)↵    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)↵    at e.invokeTask [as invoke] (http://localhost:8100/build/polyfills.js:3:16794)↵    at p (http://localhost:8100/build/polyfills.js:2:27648)↵    at XMLHttpRequest.v (http://localhost:8100/build/polyfills.js:2:27893)"
__proto__
:
Error
text
:
"<br />↵<b>Notice</b>:  Undefined index: username in <b>C:\xampp\htdocs\gameon-server-side\create.php</b> on line <b>25</b><br />↵<br />↵<b>Notice</b>:  Undefined index: email in <b>C:\xampp\htdocs\gameon-server-side\create.php</b> on line <b>26</b><br />↵<br />↵<b>Notice</b>:  Undefined index: password in <b>C:\xampp\htdocs\gameon-server-side\create.php</b> on line <b>27</b><br />↵"Inserted ""
__proto__
:
Object
headers
:
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
:
"Http failure during parsing for http://localhost/gameon-server-side/create.php"
name
:
"HttpErrorResponse"
ok
:
false
status
:
200
statusText
:
"OK"
url
:
"http://localhost/gameon-server-side/create.php"

Cheers guys

Answer 1

You are returning a plain string of text ( $output = "Inserted " . $username; ) and then trying to parse it as a JSON in your javascript. The server is probably responding with the Content-Type header set to text/html . You'll need to change it to application/json .

See this page in the PHP documentation: http://php.net/manual/en/function.header.php

Though I really recommend using a REST framework of some kind (ie Laravel) rather than manually configuring all your responses.

Answer 2

What you are sending is not valid JSON :

if($conn->query($sql) === true){
    $output = "Inserted " . $username;
    echo json_encode($output);
} else{
    echo json_encode("Error: " . $conn->error);
}

you should pass an array to json_encode to produce valid JSON

At least something along the lines:

if($conn->query($sql) === true){
    $output = "Inserted " . $username;
    echo json_encode(['output' => $outpu]t);
} else{
    echo json_encode([error' => "Error: " . $conn->error]);
}

---

prepare your query:

if(isset($_POST["email"], $_POST["username"], $_POST["password"])){
    $sql = 'insert into users(username, email, password) values (?, ?, ?)';
    if($stmt = $conn->prepare($sql)){
        $stmt->execute([$_POST["email"], $_POST["username"], $_POST["password"]]);
        $json = ['results' = > $stmt->rowCount()];
    } else{
        $json = ['error' => $con->error ]; 
    }
    echo json_encode($json);    
} 

Answer 3

Your php response didnt return JSON format correctly.To use json_encode your variable must be an ARRAY

$output = array();
if($conn->query($sql) === true){
    $output["inserted"] = $username;   
} else{
    $output["error"] = $conn->error;
}
echo json_encode($output);