Unable to get HTTP response from Angular 4

Question

I'm trying to create a login feature for my Angular app. I'm using Angular 4 (which it seems is nothing like Angularjs)

I'm trying to work out how to use HTTP and am just stuck.

I'm getting this error on the webpage:

login.component.ts (29,3): Type 'Promise<User>' is not assignable to type 'User'. Property 'id' is missing in type 'Promise<User>'.

and this on the console:

login.component.ts (30,25): Property 'json' does not exist on type 'User'.

For the life of me I can't seem to get the actual response sent from the server (see below).

I've followed the HTTP tutorial on angular.io (https://angular.io/tutorial/toh-pt6) and I've tried numerous variations with .subscribe, .map, etc

This is the component that accesses the backend:

export class loginComponent {
SERVICE_URL = "http://localhost:80/play/classes/index.php?fn=userLogin";
model = new Login("", "");
user: User;
constructor(private http: Http) {}

onSubmit(){
    console.log("submission complete!");
    console.log(this.model.username);
    console.log(this.model.pass);

    let params: URLSearchParams = new URLSearchParams();
params.set('username', this.model.username);
params.set('password', this.model.pass);
    this.user = this.doLogin(params);
    console.log(this.user.json);

}

doLogin(params: URLSearchParams): Promise<User>{

    return this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) )
        .toPromise()
        .then(response => response.json().data as User)
        .catch(this.handleError);

}

get diagnostic() { return JSON.stringify(this.model); }

private handleError(error: any): Promise<any> {
  console.error('An error occurred', error); // for demo purposes only
  return Promise.reject(error.message || error);
}
}

This is the response I get from the server but can't actually use in the app:

{"id":"3","username":"jamiemac262","password":"123456","dob":"1993-03-24","email":"[email protected]","steamID":null,"age":24}

Aravind · Accepted Answer · 2017-07-16 00:49:05Z

2

You didn't resolve the promise for accessing the data

this.doLogin(params).then((data=>console.log(data));

Use then operator to get the data

Update you are not using json mapping and separate the observable and promise

doLogin(params: URLSearchParams): Promise<User>{

 let promise = this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) )
        .map(response => <User>response.json())
        .catch(this.handleError);
    return promise.toPromise();
}

this.doLogin(params).then((data)=>console.log(data),()=>{});

edited Jul 16, 2017 at 0:49

answered Jul 15, 2017 at 23:35

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

3 Comments

Jamie McAllister Over a year ago

I just tried this, there's a slight syntax error (you have an extra bracket after .then(

Jamie McAllister Over a year ago

When I use your example, the console says undefined where it tries to print out data

Aravind Over a year ago

you already used then in your doLogin() method. so are you available in teamviewer?

Collectives™ on Stack Overflow

Unable to get HTTP response from Angular 4

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related