Angular / Spring Boot | error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"

Question

I am currently working on a tutorial to get to know Spring Boot and currently facing the following problem.

During my registration process (works correctly -> user ends up in the database) I get the status code 200/OK in the browser console, but also an error message regarding an incorrect syntax:

My backend code looks like this:

AuthController:

@RestController
@RequestMapping(value = "/api/auth")
@AllArgsConstructor
public class AuthController {

    private final AuthService authService;
    private final RefreshTokenService refreshTokenService;

    @PostMapping(value = "/signup")
    public ResponseEntity<String> signup(@RequestBody RegisterRequest registerRequest) {
        /*
        * RegisterRequest: Through this class we are transferring the user details like username, password and email as part of the RequestBody (DTO)
        * */
        authService.signUp(registerRequest);

        return new ResponseEntity<>("Registration Successful", null, OK);
    }
 ....

AuthService:

  @Transactional
  public void signUp(RegisterRequest registerRequest) {
    User user = new User();

    user.setUsername(registerRequest.getUsername());
    user.setEmail(registerRequest.getEmail());
    user.setPassword(passwordEncoder.encode(registerRequest.getPassword()));
    user.setCreated(now());
    user.setEnabled(false);

    userRepository.save(user);

    String token = generateVerificationToken(user);

    String message  = mailContentBuilder.build("Thank you for signing up to Spring Reddit, please click on the below url to activate your account : "
            + ACTIVATION_EMAIL + "/" + token);

    mailService.sendMail(new NotificationEmail("Please Activate your account", user.get

Email(), message));
    }

Used DTO:

public class RegisterRequest {
    private String email;
    private String username;
    private String password;
}

My frontend code looks like:

SignUpComponent:

  signUp() {
    this.signUpRequestPayload.email = this.signUpForm.get('email').value;
    this.signUpRequestPayload.password = this.signUpForm.get('password').value;
    this.signUpRequestPayload.username = this.signUpForm.get('username').value;

    this.authService.signUp(this.signUpRequestPayload).subscribe((data) => {
      console.log('Sign up successful', data);
    });
  }

AuthService:

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private headers = new HttpHeaders({ 'Content-Type': 'application/json' });

  constructor(private http: HttpClient) { }

  signUp(signUpRequestPayload: SignUpRequestPayload): Observable<SignUpRequestPayload> {
    const body = JSON.stringify(signUpRequestPayload);
    return this.http.post<SignUpRequestPayload>('http://localhost:8080/api/auth/signup', body, { headers: this.headers });
  }
}

Used interface:

export class SignUpRequestPayload {
  email: string;
  password: string;
  username: string;
}

What am I doing wrong here?

Codehan25 · Accepted Answer · 2020-06-23 14:36:23Z

1

I solved it like this:

  signUp(signUpRequestPayload: SignUpRequestPayload): Observable<string> {
    const body = signUpRequestPayload;
    return this.http.post('http://localhost:8080/api/auth/signup', body, { responseType: 'text', headers: this.headers });
  }

I had to remove from the post method and set the responseType to 'text'. I also had to remove the JSON.stringify() method and set the return type to Observable.

answered Jun 23, 2020 at 14:36

Codehan25

3,04213 gold badges61 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yogesh Prajapati · Accepted Answer · 2020-06-23 11:05:49Z

0

As your response("Registration Successful") is not valid JSON.

So please remove <SignUpRequestPayload> from below line

return this.http.post<SignUpRequestPayload>

answered Jun 23, 2020 at 11:05

Yogesh Prajapati

4,8682 gold badges40 silver badges77 bronze badges

2 Comments

Yogesh Prajapati Over a year ago

It depends on your response type, you can remove it to use string at this moment.

Codehan25 Over a year ago

I tried to remove it completely and to replace the type with string --> Same error..

Collectives™ on Stack Overflow

Angular / Spring Boot | error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related