web-dev-qa-db-fra.com

Comment puis-je POST JSON dans Angular 2?

Je ne comprends pas ce que je fais mal, mon serveur renvoie "indéfini" lorsque j'essaie d'obtenir le 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() }
            }
        });
    }

Et ma fonction:

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

Lorsque j'essaie ceci, le corps de la requête ressemble à ceci:

enter image description here

Ainsi, au lieu d’envoyer un JSON réel, il envoie simplement "[objet Object]". Au lieu de "Request payload", il devrait être "JSON". Qu'est-ce que je fais mal?

resttypescriptangular
24
Sebastian Olsen

Vous devez stringifier la charge utile

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

Je cherchais une réponse visuelle à la question de l'affichage des données json dans Angular pendant un certain temps, sans résultat. Maintenant que j'ai finalement quelque chose qui fonctionne, partageons ceci:

En ligne

Supposons que vous attendez un corps de réponse JSON de 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))
);

doc officiel

Classe extensible

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

L'essentiel

Au début, je manquais ce genre de moyen "imbriqué" pour passer dans le type de contenu:

{headers:{'Content-Type': 'application/json'}}
20
Arnaud P

L'en-tête devrait être

'Content-Type': 'application/json'

et

 body: data

devrait être

 body: JSON.stringify(data);
1
Günter Zöchbauer