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

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[i].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": "[email protected]",
        "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": "[email protected]",
        "password": "613387"
    },
    {
        "id": 18,
        "lastname": "chendada",
        "firstname": "Jerry",
        "email": "[email protected]",
        "password": "613387"
    },
    {
        "id": 19,
        "lastname": "chendada",
        "firstname": "Jerry",
        "email": "[email protected]",
        "password": "613387"
    },
    {
        "id": 20,
        "lastname": "VFVSD",
        "firstname": "Jerry",
        "email": "DSFSDF",
        "password": "FDSFSDFDS"
    },
    {
        "id": 22,
        "lastname": "zhaohua liu",
        "firstname": "Jerry",
        "email": "[email protected]",
        "password": "613387"
    },
    {
        "id": 23,
        "lastname": null,
        "firstname": null,
        "email": "[email protected]",
        "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

Solution 1:^[1]

You seem to be getting back a JSON object then restringifying it and parsing it. thats probably why?

   ngOnInit() {
      this.surgeonList = [
      ];
      console.log(this.value);
      this.httpclient.get('http://localhost:8080/users'
      ).subscribe(
          data => {
          this.surgeonList = data.map(doc=>{
          return {
              doc.lastname,
              icon: 'person'
            }
          })
              
              
          }
      );
  }

Solution 2:^[2]

Do as follows : Put @ResponseBody on your controller

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

@GetMapping(value="/users",produces="application/json")
    @ResponseBody
    public List getUsers(){
        List users = userRepository.findAll();
        return users;
    }

OR Annonate your class with @RestController

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Pari Baker
Solution 2	DEBENDRA DHINDA

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]