Inadequate data being sent to the server from Angular2 post request

Question

Inadequate data being sent to the server from Angular2 post request

Currently, I have a form field whose value I am passing to a service as this.form.value. However, when I log this.form.value on the console, I see

Object { email: "zxzx", password: "zxzxx" }

. Despite this, when I send the same data to the service and make a call to the server with the following code:

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 {
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 successfully getting called, but unfortunately, the values are not being passed through correctly. Upon logging the response on the console, I get the following result:

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

If anyone could provide some guidance on how to resolve this issue, it would be greatly appreciated.

Thank you.

javascript typescript angular

Answer 1

Answer №1

Your console.log is showing the observable related to your request, but not its actual result. To display the result, you can incorporate the do operator:

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

You mentioned that the request is being executed. This will only happen if you subscribe to the observable:

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

Edit

Additionally, remember to specify 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 need to send an url-encoded form:

Make sure to include 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);
});
}

Answer 2

Your console.log is showing the observable related to your request, but not its actual result. To display the result, you can incorporate the do operator:

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

You mentioned that the request is being executed. This will only happen if you subscribe to the observable:

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

Edit

Additionally, remember to specify 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 need to send an url-encoded form:

Make sure to include 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);
});
}

Answer 3

Answer №2

If you don't subscribe(), the observable will not trigger any actions:

addNewPost(post){
  return this._http.post(this._url, JSON.stringify(post))
    .map(response => response.json())
    .do(value => console.log(value));
}

...
this.addNewPost(...).subscribe(result => console.log(result));

Answer 4

If you don't subscribe(), the observable will not trigger any actions:

addNewPost(post){
  return this._http.post(this._url, JSON.stringify(post))
    .map(response => response.json())
    .do(value => console.log(value));
}

...
this.addNewPost(...).subscribe(result => console.log(result));

Inadequate data being sent to the server from Angular2 post request

Answer №1

Answer №2

Similar questions

AngularJS: Tips for bypassing filtering when inputting values outside of the range [1,2,3,4]

How do I delete an element from an array in a MongoDB database using Node.js?

Error encountered while attempting to download PDF file (blob) using JavaScript

The designated apiUser.json file could not be located within the _http.get() function

Retrieve a div element using Ajax from the result of an If statement

Implementing mixin functions in vue.router routes with Vue.js

What is the best way to modify the styling of my CSS attributes?

Can the z-index property be applied to the cursor?

Leveraging server-side data with jQuery

Generating pop-up upon loading with CSS3

Hmm, seems like there's an issue with the touchable child - it must either be native or forward setNativeProps to

tips for incorporating async/await within a promise

Searching through an array based on a specific string

Injecting services into AngularJS controllers helps to provide the necessary dependencies

The issue of Angular child components rendering before receiving parent data

Why are UI changes delayed when using Angular2 Google Maps events?

Having issues fetching data from the store with the latest version of Ngrx

What is the best way to create a moving line using EaselJS and TweenJS?

React is nowhere to be seen

"Exploring the process of assigning input data to a different variable within a Vue component