angular 에서 JSON 형식 가시화

 

* 영어표기가 디폴트, 이하 한글표기

* angular 16.2.0 버전 사용

---

 

 

html 화면에서 json 형식의 데이터를 띄워야 하는 상황

 

 

 

0. JSON?

    - 참고(https://www.daleseo.com/js-json/)

    - 간단하게 설명하자면 { id: "admin", pw: "test123" } 형식의 데이터 포멧

    - Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷

 

   

 

1. 데이터 세팅

     1-1. json 데이터 형식의 interface 세팅

//인터페이스 interface TestIntface {   status: string;   result: {     version: string;     value: string;   } } ... //변수 testIntface: TestIntface = { status: '', result: { version: '', value: '' } }; ...

 

 

     1-2. 필요한 데이터를 변수에 할당

this. testIntface = JSON.parse(this.APIData.response);

내장함수를 사용하여 데이터를 변환합니다. JSON.parse  - JSON 문자열을 JavaScript 객체로 변환 데이터 -> JSON JSON.stringify - JavaScript 객체 를 JSON 문자열로 변환 JSON -> 문자열

 

 

     1-3. <pre> 태그를 사용하여 html 에서 구현

<!-- html --> <pre>{{this. testIntface | json}}</pre>

angular 의 pipe - html 에서 입력 받은 데이터를 원하는 유형으로 변환 및 변환 값을 반환하는 함수 - 파이프 참고 (https://www.angular.kr/guide/pipes) - json 파이프 참고(https://www.angular.kr/api/common/JsonPipe)