I encountered an error when working on the code mentioned in this post. After removing .json() from response.json() in my code snippet below, the error message changed:
return this.http.post('http://localhost:3000/sign-up', body, {headers: headers}) .map((response: Response) => response.json())
Response {_body: "<!DOCTYPE html>↵<html lang="en">↵<head>↵ <base …src="/js/app/bundle.js"></script>↵</body>↵</html>",
As a beginner in web development, I am following an online course tutorial for guidance. However, I understand that my console.log output should be an object and not just 'Response'. How can I ensure that the data returned matches the information submitted through an HTML form?
Although I have retained the .json() in the code snippet provided below to showcase the original error of 'Unexpected token < in JSON at position 0 at JSON.parse ()', I have removed it as mentioned above resulting in the new error message being displayed:
Response {_body: "<!DOCTYPE html>↵<html lang="en">↵<head>↵ <base …src="/js/app/bundle.js"></script>↵</body>↵</html>",import { Injectable } from "@angular/core";
import { Http, Headers, Response } from "@angular/http";
import 'rxjs/Rx';
import { Observable } from "rxjs";
import { User } from "./user.model";
import { ErrorService } from "../errors/error.service";
@Injectable()
export class AuthService {
constructor(private http: Http, private errorService: ErrorService) {}
signup(user: User) {
const body = JSON.stringify(user);
const headers = new Headers({'Content-Type': 'application/json'});
return this.http.post('http://localhost:3000/sign-up', body, {headers: headers})
.map((response: Response) => response.json());
// .catch((error: Response) => {
// this.errorService.handleError(error.json());
// return Observable.throw(error.json());
// });
}
}
Next Class
import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { AuthService } from "./auth.service";
import { User } from "./user.model";
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html'
})
export class SignupComponent implements OnInit {
myForm: FormGroup;
constructor(private authService: AuthService) {}
onSubmit() {
const user = new User(
this.myForm.value.email,
this.myForm.value.password,
this.myForm.value.firstName,
this.myForm.value.lastName,
this.myForm.value.age,
this.myForm.value.goal
);
this.authService.signup(user)
.subscribe(
data => console.log(data),
error => console.error(error)
);
this.myForm.reset();
}
ngOnInit() {
this.myForm = new FormGroup({
firstName: new FormControl(null, Validators.required),
lastName: new FormControl(null, Validators.required),
email: new FormControl(null, [
Validators.required,
Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
]),
password: new FormControl(null, Validators.required),
age: new FormControl(null, Validators.required),
goal: new FormControl(null, Validators.required)
});
}
}