SyntaxError: Unexpected token ? in JSON at position 8

Question

i'm a beginner at angularJS 2 and i'm trying to create a login form using PHP as a back-end tech. I have written the following code in app.component.ts

import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
import {Injectable, Component } from 'angular2/core'; 
import 'rxjs/add/operator/map'

@Component({
selector: 'my-app',
templateUrl: 'app/loginForm.component.html',
providers:[HTTP_PROVIDERS]
})
export class AppComponent { 

private data;

constructor(private http:Http){
}

submit(){
    this.getData();
}

getData(){
       this.http.get('http://localhost/AngularWithPhpTest/').
       map(data => data.json()).subscribe(data =>console.log(data));
}
}

and here's my loginForm.component.html

<form (ngSubmit)="submit()" action="index.php" method="post">
<div class="control-group">
    <label for="username">Username </label>
    <input type="text" id="username" class="form-control" name="username" 
value="xxx">
</div>
<div class="control-group">
    <label for="username">password </label>
    <input type="password" id="password" name="password"class="form-control" 
value="xxx">
</div>
<input type="submit" class="btn btn-primary"  name="submit" value="Log-In">
</form>

and finally this is the php code :

header("Access-Control-Allow-Origin: *");
$con=mysql_connect('localhost','root','') or die("Failed to connect to 
MySQL: 
" . mysql_error()); 
$db=mysql_select_db('test',$con) or die("Failed to connect to MySQL: " . 
mysql_error()); 
function SignIn() {
session_start();
$username = $_POST['username'];
$password = $_POST['password'];
echo $username."             ".$password;
if(!empty($_POST['username']))
{ 
$query = mysql_query("SELECT * FROM user where username='$username' 
AND password = '$password'") or die(mysql_error()); 
$row = mysql_fetch_array($query) or die(mysql_error()); 
if(!empty($row['username']) AND !empty($row['password'])) 
{ 
$_SESSION['username'] = $row['password']; 
echo "SUCCESSFULLY LOGIN TO USER PROFILE PAGE..."; 
$uname=$row['username'];
$pass=$row['password'];
$data = array('username'=>$uname ,'password' => $pass);
echo json_encode($data);
} 
else { 
echo "SORRY... YOU ENTERD WRONG ID AND PASSWORD... PLEASE RETRY..."; 
}
}
}
if(isset($_POST['submit'])) { 
SignIn(); 
}

These are the errors i get :

angular2.dev.js:23083 STACKTRACE:
BrowserDomAdapter.logError @ angular2.dev.js:23083
ExceptionHandler.call @ angular2.dev.js:1187
(anonymous) @ angular2.dev.js:12591
NgZone._notifyOnError @ angular2.dev.js:13635
onError @ angular2.dev.js:13539
Zone.run @ angular2-polyfills.js:1247
(anonymous) @ angular2.dev.js:13558
zoneBoundFn @ angular2-polyfills.js:1220
angular2.dev.js:23083 SyntaxError: Unexpected token ? in JSON at position 8
    at JSON.parse (<anonymous>)
    at Function.Json.parse (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:359:27)
    at Response.json (http://localhost:3000/node_modules/angular2/bundles/http.dev.js:290:36)
    at MapSubscriber.eval [as project] (http://localhost:3000/app/app.component.js:33:109)
    at MapSubscriber._next (http://localhost:3000/node_modules/rxjs/bundles/Rx.js:5039:31)
    at MapSubscriber.Subscriber.next (http://localhost:3000/node_modules/rxjs/bundles/Rx.js:10667:14)
    at XMLHttpRequest.onLoad (http://localhost:3000/node_modules/angular2/bundles/http.dev.js:660:30)
    at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1243:24)
    at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13558:32)
    at XMLHttpRequest.zoneBoundFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1220:26)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2244:29)
    at Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2293:47)
    at Zone.bind (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1218:53)
    at XMLHttpRequest.obj.addEventListener (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1503:95)
    at Observable._subscribe (http://localhost:3000/node_modules/angular2/bundles/http.dev.js:681:14)
    at Observable.subscribe (http://localhost:3000/node_modules/rxjs/bundles/Rx.js:11006:29)
    at Observable._subscribe (http://localhost:3000/node_modules/rxjs/bundles/Rx.js:11038:26)
    at Observable.subscribe (http://localhost:3000/node_modules/rxjs/bundles/Rx.js:11004:29)
    at AppComponent.getData (http://localhost:3000/app/app.component.js:33:131)
    at AppComponent.submit (http://localhost:3000/app/app.component.js:30:26)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2244:29)
    at Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2293:47)
    at arguments.(anonymous function) (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1671:82)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2244:29)
    at Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2293:47)
    at NgZone._createInnerZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13546:39)
    at new NgZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13412:32)
    at createNgZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12475:12)
    at PlatformRef_.application (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12550:31)
    at Object.bootstrap (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24805:64)
    at execute (http://localhost:3000/app/boot.js:14:23)
    at ensureEvaluated (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3186:26)
    at Object.execute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3304:13)
BrowserDomAdapter.logError @ angular2.dev.js:23083
ExceptionHandler.call @ angular2.dev.js:1188
(anonymous) @ angular2.dev.js:12591
NgZone._notifyOnError @ angular2.dev.js:13635
onError @ angular2.dev.js:13539
Zone.run @ angular2-polyfills.js:1247
(anonymous) @ angular2.dev.js:13558
    zoneBoundFn @ angular2-polyfills.js:1220
    angular2.dev.js:359 Uncaught SyntaxError: Unexpected token ? in JSON at position 
    8
    at JSON.parse (<anonymous>)
    at Function.Json.parse (angular2.dev.js:359)
    at Response.json (http.dev.js:290)
    at MapSubscriber.eval [as project] (app.component.ts:22)
    at MapSubscriber._next (Rx.js:5039)
    at MapSubscriber.Subscriber.next (Rx.js:10667)
    at XMLHttpRequest.onLoad (http.dev.js:660)
    at Zone.run (angular2-polyfills.js:1243)
    at Zone.run (angular2.dev.js:13558)
    at XMLHttpRequest.zoneBoundFn (angular2-polyfills.js:1220)

**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) that has been [removed](http://php.net/manual/en/mysql.php) from PHP. You should select a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, May 01 '17 at 13:26
**Danger**: You are using [an unsuitable hashing algorithm](http://php.net/manual/en/faq.passwords.php) (i.e. none at all) and need to [take better care](https://www.owasp.org/index.php/Password_Storage_Cheat_Sheet) of your users' passwords. — Quentin, May 01 '17 at 13:27
"Unexpected token ? in JSON at position 8" — So look at the response in the Network tab of your browser's developer tools. Look at the generated JSON (with a focus on the 8th character in it). Is it what you expect? Is it valid? — Quentin, May 01 '17 at 13:28
Did you check your user/pass data that you are pulling in as JSON to make sure that it was valid? It appears that maybe the JSON is invalid or has something in there that isn't pulling in correctly and encoding as JSON. I would go ahead and visit your file that is making the JSON output and test it by itself to see if the data is pulling and correct. — donlaur, May 01 '17 at 13:28
@donlaur yes, i already checked it, and it's pulling it correctly,in fact i tested my php code in a seperated project and it's working.but when i write in my app.component `this.http.get('http://localhost/AngularWithPhpTest/').map(data => data.json());` it gives the expected answer but when i add the sbscribe method to the observable those errors show. — OmAr El Ghati, May 01 '17 at 13:36

SyntaxError: Unexpected token ? in JSON at position 8

0 Answers0