Comment afficher une représentation JSON et non [Object Object] à l'écran

Je crée une application AngularJS 2 avec la version bêta. Je souhaite afficher une représentation JSON d'un objet dans ma page, mais cela s'affiche [Object Object]et non {key1:value1 ....}

À partir du composant que je peux utiliser:

get example() {return JSON.stringify(this.myObject)};

puis dans le modèle:

{{example}}

mais si j'ai un tableau d'objets et que je souhaite imprimer une liste de ces objets, comment puis-je le faire?

En utilisant:

<ul>
   <li *ngFor="#obj of myArray">{{obj}}</li>
</ul>

donne quelque chose comme:

- [Objet Objet]
- [Objet Objet]
- [Objet Objet]
- [Objet Objet]

etc. Existe-t-il un moyen de les afficher au format JSON?

Si vous souhaitez voir ce que vous avez à l'intérieur d'un objet dans votre application Web, utilisez le tube json dans un modèle HTML de composant, par exemple:

<li *ngFor="let obj of myArray">{{obj | json}}</li>

Testé et valide avec Angular 4.3.2.

Nous pouvons utiliser le tuyau angulaire json

{{ jsonObject | json }}

Pour parcourir l'objet JSON: Dans Angluar (6.0.0+), ils fournissent maintenant le tube keyvalue:

<div *ngFor="let item of object| keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

A LIRE AUSSI

Pour afficher simplement JSON

{{ object | json }}

Le vidage du contenu de l'objet en tant que JSON peut être réalisé sans utiliser ngFor. Exemple:

Objet

export class SomeComponent implements OnInit {
    public theObject: any = {
        simpleProp: 1,
        complexProp: {
            InnerProp1: "test1",
            InnerProp2: "test2"
        },
        arrayProp: [1, 2, 3, 4]
    };

Balisage

<div [innerHTML]="theObject | json"></div>

Sortie (parcourue par un embellisseur pour une meilleure lisibilité, sinon elle est sortie sur une seule ligne)

{
  "simpleProp": 1,
  "complexProp": {
    "InnerProp1": "test1",
    "InnerProp2": "test2"
  },
  "arrayProp": [
    1,
    2,
    3,
    4
  ]
}

J'ai également découvert un formateur et une visionneuse JSON qui affiche des données JSON plus volumineuses plus lisibles (similaire à l'extension JSONView Chrome): https://www.npmjs.com/package/ngx-json-viewer

<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>

Il existe 2 façons d'obtenir les valeurs: -

1. Accédez à la propriété de l'objet en utilisant la notation par points (obj.property).
2. Accédez à la propriété de l'objet en passant la valeur clé par exemple obj ["propriété"]

<li *ngFor="let obj of myArray">{{obj | json}}</li>

Mettre à jour les réponses des autres avec la nouvelle syntaxe:

<li *ngFor="let obj of myArray">{{obj | json}}</li>

si vous avez un tableau d'objets et que vous souhaitez les désérialiser dans compoent

get example() { this.arrayOfObject.map(i => JSON.stringify (i) ) };

puis dans le modèle

<ul>
   <li *ngFor="obj of example">{{obj}}</li>
</ul>

this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });