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

Enhancing Website Functionality: How to Swap iFrame for DIV using PHP and AJAX

Issues with JQuery `.click()` event

Allow for the ability to choose a specific option for every individual line that is echoed in

Unlocking the Power of ReactJS: Passing Values in Material UI for Advanced JSON Structures

Angular 9 is throwing an error that specifies that the options provided in the @ViewChild decorator must be in

Iterating through an array of objects and performing reduction based on various key-value pairs

How Angular can fetch data from a JSON file stored in an S3

The compilation of the module has encountered an error with the PostCSS loader. There is a SyntaxError at line 2, character 14 indicating an unknown

How to Use a For Each Loop with Google Maps DrawingManager to Create Polygons?

I possess a table that showcases MatIcon buttons. Upon clicking on a button, two additional buttons should appear at the bottom of the table

Cookies are failing to be saved upon reloading the page

What is the best way to create a TypeScript function that merges actions together?

Tips on eliminating certain text from a hyperlink

Access my web application to easily download Jira tickets in XML format with just a single click

Is there a way to conceal the headers during an ajax request?

The counterpart to Ruby's `.select{ |x| condition }` in Javascript/ React.js would be to

Performing a request following a POST operation within Postman

What is the method for sending one URL as a parameter within another URL?

Looking to retrieve the full browser URL in Next.js using getServerSideProps? Here's how to do

Unlock the power of AJAX in your WordPress site