Angular2 post request not sending proper data to server

Question

I am taking the field of a form and passing it to a service as this.form.value when I am logging this.form.value on the console I am getting Object { email: "zxzx", password: "zxzxx" } when I am sending the same thing to the service and calling the server like :

import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {Injectable} from 'angular2/core'
import {Post} from './post';
import {Observable} from 'rxjs/Observable';


@Injectable()
export class PostService {
//dependency injection
private _url = "http://127.0.0.1/accounts/login_user/";
constructor(private _http:Http) {

}


createPost(post){

    return this._http.post(this._url,JSON.stringify(post))
    .map(res=>res.json());

}
}

The server is being called but the values are not being passed. When I am logging the response on the console I am getting :

Object { _isScalar: false, source: Object, operator: Object }

Can somebody please help me solve this issue?

Thank you.

Thierry Templier · Accepted Answer · 2016-04-28 13:36:14Z

2

Your console.log prints the observable corresponding to your request but not its result. If you want to print this result, you can use the do operator:

createPost(post){
  return this._http.post(this._url,JSON.stringify(post))
    .map(res=>res.json())
    .do(data => {
      console.log(data);
    });
}

You said that the request is executed. It's actually the case if you subscribe on the observable:

this.service.createPost(...).subscribe(() => {
  (...)
});

Edit

You also need to set the Content-Type header:

createPost(post){
  var headers = new Headers();
  headers.append('Content-Type', 'application/json');
  return this._http.post(this._url,JSON.stringify(post), { headers })
    .map(res=>res.json())
    .do(data => {
      console.log(data);
    });
}

Edit2

If you want to send an url-encoded form:

You also need to set the Content-Type header:

createPost(post){
  var headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  let content = new URLSearchParams();
  content.set('prop', post.prop);
  (...)

  return this._http.post(this._url, content.toString(), { headers })
    .map(res=>res.json())
    .do(data => {
      console.log(data);
    });
}

edited Apr 28, 2016 at 13:36

answered Apr 28, 2016 at 11:31

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

13 Comments

Reckonsys Over a year ago

I am getting an exception saying : TypeError: this.postService.createPost(...).subscribe is not a function

Thierry Templier Over a year ago

There was a typo in my answer. Could you make a new try?

Reckonsys Over a year ago

I removed the extra bracket and ran earlier but even then it is failing giving a TypeError : do is not a function

Thierry Templier Over a year ago

You need to import explicitly observable operators. Something like import 'rxjs/add/operator/do';. See this question for more details: stackoverflow.com/questions/34515173/….

Reckonsys Over a year ago

Importing do , the code is running but the problem is not solved. It is going to the server but I am unable to get data from the request. i am using django as backend and in the view I am trying to get data from the request by doing request.POST.get('email') but it is displaying None

|

Günter Zöchbauer · Accepted Answer · 2016-04-28 11:49:51Z

2

You need to subscribe() otherwise the observable won't do anything:

createPost(post){
  return this._http.post(this._url,JSON.stringify(post))
    .map(res=>res.json())
    .do(val => console.log(val));
}

...
this.createPost(...).subscribe(data => console.log(data));

edited Apr 28, 2016 at 11:49

answered Apr 28, 2016 at 11:31

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

4 Comments

Reckonsys Over a year ago

I am getting an exception saying : TypeError: this.postService.createPost(...).subscribe is not a function

Günter Zöchbauer Over a year ago

It wasn't obvious how you use createPost. If you want to call subscribe on call site, then you shouldn't subscribe inside the function like I did in my answer.

Günter Zöchbauer Over a year ago

What response do you expect?

Reckonsys Over a year ago

My problem is it is calling the server but then I am trying to get the objects passed by doing request.POST.get('email') it is displaying None. I think it is calling the server but somehow the request parameters are not being passed. How do I fix that was my question.

Collectives™ on Stack Overflow

Angular2 post request not sending proper data to server

2 Answers 2

13 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related