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(), authtoken = localStorage.getItem('authtoken');
        headers.append("Content-Type", 'application/json');

        if (authtoken) {
        headers.append("Authorization", 'Token ' + authtoken)
        }
        headers.append("Accept", 'application/json');

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

        return this.http.request(new Request(requestoptions))
        .map((res: Response) => {
            if (res) {
                return { status: res.status, json: res.json() }
            }
        });
    }

And my function:

login(username, password) {
        this.POST('login/', {test: 'test'}).subscribe(data => {
            console.log(data)
        })
    }

When I try this, the request body looks like this:

So instead of sending actual json, it just sends "[object Object]". Instead of "Request payload" it should be "JSON". What am I doing wrong?

Where does the call to `POST(...)` look like? How does the binding look like that shows the result in HTML? — Günter Zöchbauer, May 05 '16 at 13:18
So the problem is not the response but the value received by the server? — Günter Zöchbauer, May 05 '16 at 13:19
No, the problem is that angular2 does not send json, which is what I need. — Sebastian Olsen, May 05 '16 at 13:20

Arnaud P · Answer 1 · 2018-05-14T13:58:53.447

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'}}

score 17 · Accepted Answer · answered May 05 '16 at 13:20

17

You need to stringify the payload

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

answered May 05 '16 at 13:20

Ankit Singh

24,525
11
66
89

how do I stringify a ECMA6 `Map`? – phil294 Feb 04 '17 at 16:48
[this](http://stackoverflow.com/questions/29085197/how-do-you-json-stringify-an-es6-map) might help – Ankit Singh Feb 05 '17 at 07:00

score 1 · Answer 3 · edited Jul 24 '18 at 14:24

1

The header should be

'Content-Type': 'application/json'

and

 body: data

should be

 body: JSON.stringify(data);

edited Jul 24 '18 at 14:24

Daniel Boso

47
5

answered May 05 '16 at 13:21

Günter Zöchbauer

623,577
216
2,003
1,567

Link is dead Günter. – Baz Guvenkaya Aug 28 '17 at 01:52

How do I POST JSON in Angular 2?

3 Answers3

Inlined

Extendable class

The gist

Linked