자바스크립트 JSON 데이터를 자바스크립트로 가져와서 판별하는 방법

10 Sep 2023

javascript

JSON(JavaScript Object Notation)은 데이터를 교환하고 저장하기 위한 일반 텍스트 형식입니다. 자주 사용되는 데이터 형식 중 하나이며, 자바스크립트와 매우 유사한 구문을 가지고 있기 때문에 자바스크립트에서 JSON 데이터를 다루기에 매우 편리합니다.

이제 JSON 데이터를 자바스크립트로 가져와서 판별하는 방법을 알아보겠습니다.

1. JSON 데이터 가져오기

JSON 데이터를 자바스크립트로 가져오는 첫 번째 단계는 데이터를 어떤 방식으로 가져올지 결정하는 것입니다. 일반적으로 웹 API를 사용하여 데이터를 가져옵니다. 예를 들어, fetch 함수를 사용하여 서버에서 JSON 데이터를 가져올 수 있습니다.

아래는 예시 코드입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(jsonData => {
    // JSON 데이터를 처리하는 코드
  })
  .catch(error => {
    console.error('데이터 가져오기 실패:', error);
  });

위 코드에서 fetch 함수를 사용하여 https://api.example.com/data에서 데이터를 가져옵니다. response.json()을 호출하여 데이터를 JSON 형식으로 변환한 후, 반환된 Promise에서 데이터를 처리하는 부분을 작성할 수 있습니다.

2. JSON 데이터 판별하기

JSON 데이터를 자바스크립트로 가져온 후, 해당 데이터를 판별하기 위해서는 다양한 방법이 있습니다. JSON 데이터는 일반적으로 객체 또는 배열 형태로 구성되어 있으므로, 이러한 데이터 구조를 기반으로 판별할 수 있습니다.

아래는 예시 코드입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(jsonData => {
    if (Array.isArray(jsonData)) {
      console.log('JSON 데이터는 배열입니다.');
      // 배열 처리 코드 작성
    } else if (typeof jsonData === 'object') {
      console.log('JSON 데이터는 객체입니다.');
      // 객체 처리 코드 작성
    } else {
      console.log('유효하지 않은 JSON 데이터입니다.');
    }
  })
  .catch(error => {
    console.error('데이터 가져오기 실패:', error);
  });

위 코드에서 typeof 연산자를 사용하여 JSON 데이터가 배열인지 또는 객체인지 확인합니다. Array.isArray() 함수를 사용하여 배열 여부를 확인할 수도 있습니다. 이를 기반으로 각각의 데이터 유형에 대한 처리 코드를 작성할 수 있습니다.

3. JSON 데이터 사용하기

JSON 데이터를 자바스크립트로 가져오고 판별한 후에는 해당 데이터를 원하는 방식으로 사용할 수 있습니다. 객체와 배열의 경우, 각각의 속성이나 요소에 접근하여 데이터를 활용할 수 있습니다.

아래는 예시 코드입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(jsonData => {
    if (Array.isArray(jsonData)) {
      console.log('JSON 데이터는 배열입니다.');
      jsonData.forEach(item => {
        console.log(item);
        // 배열 요소 처리 코드 작성
      });
    } else if (typeof jsonData === 'object') {
      console.log('JSON 데이터는 객체입니다.');
      console.log(jsonData);
      // 객체 속성 처리 코드 작성
    } else {
      console.log('유효하지 않은 JSON 데이터입니다.');
    }
  })
  .catch(error => {
    console.error('데이터 가져오기 실패:', error);
  });

위 코드에서는 배열의 경우 forEach 메소드를 사용하여 각 요소에 접근하고 처리하며, 객체의 경우에는 프로퍼티에 직접 접근하여 값을 가져올 수 있습니다.

결론

자바스크립트에서 JSON 데이터를 가져와서 판별하는 것은 매우 간단합니다. fetch 함수를 사용하여 데이터를 가져온 후, 데이터의 형식을 판별하여 원하는 방식으로 활용할 수 있습니다. 이를 통해 다양한 웹 애플리케이션 개발에 유용하게 활용할 수 있습니다.