Analyser JSON en Angular

Rana Hasnain Khan 15 février 2024
Analyser JSON en Angular

Cet article abordera comment analyser JSON dans Angular avec des exemples.

Analyser JSON en Angular

Lorsque nous travaillons avec des API dans des applications Angulars, nous rencontrons des réponses en JSON. Il se peut que nous obtenions des données de l’API au format JSON et que nous ayons besoin de les afficher dans un tableau.

Pour cela, nous devons analyser les données JSON. Prenons un exemple et essayons de créer des données JSON en utilisant la méthode stringify de JSON.

Cette méthode est utilisée pour convertir n’importe quoi au format JSON. Ensuite, nous pouvons utiliser ce JSON pour analyser à l’aide d’une autre méthode de JSON parse().

La méthode parse() peut analyser JSON sans aucun problème.

Exemple de code :

# Angular
import { Component, VERSION, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  strInfo: any;
  parseInfo: any;

  myInfo =
    {
      "id": 0,
      "guid": "9b06a996-23f4-46ff-a007-a6bca1f9c1f3",
      "balance": "$1,590.37",
      "age": 33,
      "name": "Chaney Harrell",
      "gender": "male",
      "company": "GOGOL",
      "email": "chaneyharrell@gogol.com",
      "phone": "+1 (836) 566-3872",
      "address": "716 Grafton Street, Rodanthe, West Virginia, 6757"
    }

  ngOnInit() {
    console.log(this.myInfo);

    this.strInfo = JSON.stringify(this.myInfo);
    console.log('After using Stringify :', this.strInfo);

    this.parseInfo = JSON.parse(this.strInfo);
    console.log('After Parsing Json Info:', this.parseInfo);
  }
}

Production:

analyse des données json en Angular

Avec l’aide de stringify(), nous pouvons convertir les données en un JSON parfait, puis nous pouvons utiliser une autre fonction de JSON parse() qui peut analyser les données JSON sans aucun problème.

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Article connexe - Angular JSON