SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at...

hope this is not a stupid question. connecting ionic and java springboot , there's no error message when the app is live serving in a browser and the data is correctly displaying. But got SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () error when testing on android device.

I searched around and realized the issue is related with JSON parse, but I don't quite understand why there's no error message reported in the browser.

what i m trying to do here: I have a table User with name and email, and I m connecting to display all the name on front end.The backend returns a List.

I also used chrome CROS extension , but I dont think that is related at all. could any one help explain ? all thanks

typescript
ngOnInit() {
this.surgeonList = [
];
console.log(this.value);
this.httpclient.get('http://localhost:8080/users'
).subscribe(
data => {
data = JSON.parse(JSON.stringify(data));
for (var i = 0 ; i < (<Array<any>>data).length; i++) {
this.surgeonList.push(
{
name: data.lastname,
icon: 'person'
}
);
}
}
);
}


JAVA spring controller

@GetMapping("/users")
public List getUsers(){
List users = userRepository.findAll();
return users;
}


The get request response logs the data correctly:

[
{
"id": 2,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen698698@gmail.com",
"password": "613387"
},
{
"id": 3,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": null
},
{
"id": 4,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": null
},
{
"id": 5,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": null
},
{
"id": 6,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": null
},
{
"id": 7,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 8,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 9,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 10,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 11,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 12,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 13,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 14,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 15,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 16,
"lastname": "Liu",
"firstname": "Jerry",
"email": "karen77777",
"password": "123333"
},
{
"id": 17,
"lastname": "chenniuniu",
"firstname": "Jerry",
"email": "chenniuniu@gmail.com",
"password": "613387"
},
{
"id": 18,
"lastname": "chendada",
"firstname": "Jerry",
"email": "chendaada@bobo.com",
"password": "613387"
},
{
"id": 19,
"lastname": "chendada",
"firstname": "Jerry",
"email": "chendaada@bobo.com",
"password": "613387"
},
{
"id": 20,
"lastname": "VFVSD",
"firstname": "Jerry",
"email": "DSFSDF",
"password": "FDSFSDFDS"
},
{
"id": 22,
"lastname": "zhaohua liu",
"firstname": "Jerry",
"email": "zliu633@uwo.ca",
"password": "613387"
},
{
"id": 23,
"lastname": null,
"firstname": null,
"email": "yche98@uwo.ca",
"password": "613388"
}
]


but got this when inspecting remotely on chrome

vendor.js:44729 ERROR
HttpErrorResponse
error:
error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad


REEDIT:

Thank you guys for ur reply I'm new here to the community , you guys are the best.

I find out whats wrong here:

when I serve on the browser, I find that the response is correct as a json , like all of u guys said. response when serve on a browser

however, when I deployed the app and remotely test it on device: I got the index.html as the response: enter image description here

Continue reading...