How do I POST JSON in Angular 2?

Question

I don\'t understand what I am doing wrong, my server returns \"undefined\" when I try to get the json.

POST(url, data) {
        var headers = new Headers(),         


        

Answer 1

You need to stringify the payload

var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: JSON.stringify(data)
        })

Answer 2

I have been looking for a visual answer to the question of posting json data in Angular for a while, to no avail. Now that I eventually have something working, let's share:

Inlined

Let's assume you expect a json response body of type T.

const options = {headers: {'Content-Type': 'application/json'}};
this.http.post<T>(url, JSON.stringify(data), options).subscribe(
    (t: T) => console.info(JSON.stringify(t))
);

Official doc

Extendable class

import { HttpClient, HttpHeaders } from '@angular/common/http';

export class MyHttpService {
  constructor(protected http: HttpClient) {}

  headers = new HttpHeaders({
    'Content-Type': 'application/json'
  });

  postJson<T>(url: string, data: any): Observable<T> {
    return this.http.post<T>(
      url,
      JSON.stringify(data),
      {headers: this.headers}
    )
  }

The gist

In the beginning I missed this sort of 'nested' way to pass in the content-type:

{headers:{'Content-Type': 'application/json'}}

Answer 3

The header should be

'Content-Type': 'application/json'

and

 body: data

should be

 body: JSON.stringify(data);