Angular에서 JSON 구문 분석

이 기사에서는 예제와 함께 Angular에서 JSON을 구문 분석하는 방법을 다룹니다.

Angular에서 JSON 구문 분석

Angular 애플리케이션에서 API로 작업할 때 JSON의 응답을 접하게 됩니다. API에서 JSON 형식의 일부 데이터를 가져와 테이블에 표시해야 할 수도 있습니다.

이를 위해 JSON 데이터를 구문 분석해야 합니다. 예를 들어 JSON의 stringify 메서드를 사용하여 JSON 데이터를 생성해 보겠습니다.

이 방법은 무엇이든 JSON 형식으로 변환하는 데 사용됩니다. 그런 다음 해당 JSON을 사용하여 다른 JSON parse() 메서드를 사용하여 구문 분석할 수 있습니다.

parse() 메서드는 문제 없이 JSON을 구문 분석할 수 있습니다.

예제 코드:

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

출력:

stringify()의 도움으로 데이터를 완벽한 JSON으로 변환할 수 있으며 JSON 데이터를 문제 없이 구문 분석할 수 있는 또 다른 JSON parse() 함수를 사용할 수 있습니다.