web-dev-qa-db-fra.com

Angular 4 Afficher les données JSON de la requête HTTP Get

J'ai une simple application Angular 4 qui contacte un serveur HTTP REST et ce serveur renvoie simplement une charge utile JSON et je voudrais afficher cette charge utile JSON comme dans le navigateur. Voici ma fonction makeRequest TypeScript:

import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';

@Component({
  selector: 'app-simple-http',
  templateUrl: './simple-http.component.html'
})
export class SimpleHttpComponent implements OnInit {
  data: string;
  loading: boolean;

  constructor(private http: Http) {
  }

  ngOnInit() {
  }

  makeRequest(): void {
    this.loading = true;
    this.http.request('http://jsonplaceholder.typicode.com/posts/1')
    .subscribe((res: Response) => {
      this.data = res.json();
      this.loading = false;
    });
  }
}

L'appel à http://jsonplaceholder.typicode.com/posts/1 me renvoie le JSON suivant:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

J'affiche maintenant ceci dans mon composant html comme:

<h2>Basic Request</h2>
<button type="button" (click)="makeRequest()">Make Request</button>
<div *ngIf="loading">loading...</div>
<pre>Data Obtained is: {{ data }}</pre>

Mais dans le navigateur, je vois ceci:

enter image description here

Comment afficher mon JSON tel quel?

jsonangularresthttp
9
sparkr

Vous pouvez utiliser le json pipe . Dans votre modèle:

<pre>Data Obtained is: {{ data | json }}</pre>

Vous devez également changer le type de votre propriété data en any au lieu de string.

20
Andrei Matracaru

Vous avez deux options:

  • Utilisez le tube intégré JsonPipe (this.data Doit être de type any):

    <pre>Data Obtained is: {{ data | json }}</pre>

  • Obtenez la chaîne JSON manuellement:

    this.data = JSON.stringify(res.json()); //data is a string :)

    ou

    <pre>Data Obtained is: {{ JSON.stringify(data) }}</pre>

Vous devez comprendre que toute valeur dans un modèle est affichée en appelant sa méthode .toString(), donc un objet de base (quelque chose comme {key: value}) Affiche simplement [object Object]

Ici, vous avez un démo de travail , vérifiez le fichier app.ts, l'appel ajax et le modèle avec le tuyau json est là.

5
Pablo Lozano