web-dev-qa-db-fra.com

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

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

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 voudrais imprimer une liste de ces objets, comment puis-je le faire?

En utilisant:

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

aboutit à quelque chose comme:

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

etc. Existe-t-il un moyen de les afficher en tant que JSON?

jsonangular
89
foralobo

Si vous voulez voir ce que vous avez à l'intérieur d'un objet dans votre application Web, utilisez le tuyau 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.

161
Vlado Tesanovic

Nous pouvons utiliser angular pipe json

{{ jsonObject | json }}
54
ganesh kalje

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

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

LISEZ AUSSI

Pour afficher simplement JSON 

{{ object | json }}
19
Vivek Doshi

Le déchargement de contenu d'objet au format JSON peut être réalisé sans utiliser ngFor. Exemple:

Object 

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 (parcouru par un beautifier pour une meilleure lisibilité, sinon il est sorti sur une seule ligne)

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

J'ai également découvert un formateur et un visualiseur JSON qui affichent des données JSON plus volumineuses, plus lisibles (semblable à l'extension JSONView Chrome): https://www.npmjs.com/package/ngx-json- spectateur

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

Il y a 2 façons dont vous pouvez obtenir les valeurs: -

  1. Accédez à la propriété de l'objet à l'aide de la notation par points (obj.property).
  2. Accédez à la propriété de l'objet en transmettant la valeur de la clé, par exemple obj ["propriété"]
4
Harkirat Saluja
<li *ngFor="let obj of myArray">{{obj | json}}</li>
4
Jaydeep Kataria

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

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

si vous avez un tableau d'objet et que vous souhaitez les désérialiser en composant

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

que dans le modèle

<ul>
   <li *ngFor="obj of example">{{obj}}</li>
</ul>
0
Arash
this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });
0
user11514096