[javascript] Angular에서의 자바스크립트 JSON 다루기 방법

21 Dec 2023

javascript

Angular 애플리케이션을 개발하다 보면 서버로부터 받은 JSON 데이터를 다루어야 하는 경우가 많습니다. 자바스크립트에서 JSON을 다루는 방법을 알고 있다면 Angular에서도 유용하게 활용할 수 있습니다. 이 글에서는 Angular에서의 자바스크립트 JSON 다루기 방법에 대해 알아보겠습니다.

JSON 파싱 및 직렬화

JSON 파싱

// JSON 문자열을 파싱하여 객체로 변환
const jsonString = '{"name":"John","age":30}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // John
console.log(obj.age); // 30

JSON 직렬화

// 객체를 JSON 문자열로 직렬화
const obj = { name: 'John', age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // {"name":"John","age":30}

Angular에서의 JSON 다루기

HTTP 모듈을 이용한 JSON 데이터 가져오기

import { HttpClient } from '@angular/common/http';

export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

구독하여 JSON 데이터 처리하기

export class DataComponent implements OnInit {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe((data) => {
      // 데이터 처리 로직
      console.log(data);
    });
  }
}

Angular에서는 HTTP 모듈을 사용하여 서버로부터 JSON 데이터를 가져올 수 있습니다. 가져온 데이터는 subscribe 메서드를 사용하여 구독하고, 구독자 함수 내에서 데이터 처리 로직을 작성할 수 있습니다.

JSON 데이터를 파싱하거나 직렬화할 때에도 자바스크립트의 JSON.parse 및 JSON.stringify 메서드를 사용하여 객체와 JSON 문자열로 변환할 수 있습니다.

Angular에서는 자바스크립트의 JSON 다루기 방법을 그대로 활용할 수 있으며, HTTP 모듈을 통해 서버와의 통신을 간편하게 처리할 수 있습니다.

결론

Angular에서 서버로부터 받은 JSON 데이터를 다룰 때에는 자바스크립트의 JSON 메서드들을 적극적으로 활용하여 데이터를 파싱하거나 직렬화할 수 있습니다. 또한 HTTP 모듈을 이용하여 서버와의 통신을 편리하게 처리할 수 있습니다.

이와 같이 자바스크립트의 JSON 다루기 방법을 알고 있다면, Angular 애플리케이션에서도 데이터를 효과적으로 처리할 수 있을 것입니다.

참고 자료

MDN Web Docs: JSON