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.

Günter Zöchbauer · Answer 1 · 2016-04-28T11:49:51.107

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 '16 at 11:49

answered Apr 28 '16 at 11:31

Günter Zöchbauer

623,577
216
2,003
1,567

I am getting an exception saying : `TypeError: this.postService.createPost(...).subscribe is not a function` – Subhajit Apr 28 '16 at 11:49
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 Apr 28 '16 at 11:50
What response do you expect? – Günter Zöchbauer Apr 28 '16 at 11:53
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. – Subhajit Apr 28 '16 at 11:55

Thierry Templier · Accepted Answer · 2016-04-28T13:36:14.633

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 '16 at 13:36

answered Apr 28 '16 at 11:31

Thierry Templier

198,364
44
396
360

I am getting an exception saying : `TypeError: this.postService.createPost(...).subscribe is not a function` – Subhajit Apr 28 '16 at 11:48
There was a typo in my answer. Could you make a new try? – Thierry Templier Apr 28 '16 at 11:55
I removed the extra bracket and ran earlier but even then it is failing giving a TypeError : do is not a function – Subhajit Apr 28 '16 at 12:00
You need to import explicitly observable operators. Something like `import 'rxjs/add/operator/do';`. See this question for more details: http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in/34515276#34515276. – Thierry Templier Apr 28 '16 at 12:01
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` – Subhajit Apr 28 '16 at 12:08
I am also getting the correct error response from the server. The problem is with sending the data or how I am processing the request? – Subhajit Apr 28 '16 at 12:11
The problem here is that you don't specify the `Content-Type` header in your request ;-) – Thierry Templier Apr 28 '16 at 12:16
It is still not fetching the fields passed in the request. This was the code I used for implementing the same thing with javascript->http://dpaste.com/2MFB35C . This worked fine. Is there some problem with the form in which data is sent to the server? – Subhajit Apr 28 '16 at 12:52
Oh, I think that you don't want to use JSON content but url-encoded form ;-) It's probably the reason of your problem! – Thierry Templier Apr 28 '16 at 12:54
Yes, So I initially just passed it as a string like `email=hello&password=world` even then it did not work? So how should i send the data? – Subhajit Apr 28 '16 at 12:58
Sorry i just started with angular2 and I am kind of lost so, this might be a silly question , what does `content.set('prop', post.prop)` do? – Subhajit Apr 28 '16 at 13:18
No worries! In fact the `URLSearchParams` class allows you to build a form content. By using its `set` method, you simply add a new entry (key / value) in the form. To get the complete string representation of this form (that you will send), you need to call its `toString` method. – Thierry Templier Apr 28 '16 at 13:21
Sorry there was a typo in my last edit. It's rather: `return this._http.post(this._url, content.toString(), { headers })` – Thierry Templier Apr 28 '16 at 13:36

Angular2 post request not sending proper data to server

2 Answers2