JSON 데이터는 자바스크립트 객체와 비슷한 형태로 데이터를 저장하기 위한 형식입니다. 이러한 JSON 데이터를 자바스크립트로 가져와서 특정 요소만을 추출하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 가져오기

먼저, JSON 데이터를 가져와야 합니다. 이를 위해 자바스크립트는 fetch() 메소드를 사용할 수 있습니다. fetch() 메소드는 서버에서 데이터를 가져오는데 사용됩니다.

const url = 'https://api.example.com/data.json';

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 데이터를 처리할 함수 호출
    extractData(data);
  })
  .catch(error => {
    console.error('데이터를 가져오는 중 오류가 발생했습니다:', error);
  });

위의 코드에서 fetch() 메소드는 url에 지정된 경로로 요청을 보내고, 응답을 받아와서 JSON 형식으로 변환합니다. 그리고 변환된 데이터를 .then() 메소드 안에서 처리합니다. 만약 오류가 발생하면 .catch() 메소드에서 에러를 처리합니다.

2. JSON 요소 추출하기

데이터를 가져왔다면, 이제 JSON 데이터에서 특정 요소를 추출할 수 있습니다. 예를 들어, 아래와 같은 JSON 데이터가 있다고 가정해봅시다.

const data = {
  "name": "John Doe",
  "age": 25,
  "email": "johndoe@example.com",
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "country": "USA"
  }
};

위의 데이터에서 name과 email을 추출해보겠습니다.

function extractData(data) {
  const name = data.name;
  const email = data.email;
  
  console.log('Name:', name);
  console.log('Email:', email);
}

위의 코드에서 name과 email 변수에 각각 data.name과 data.email 값을 할당하고, 이를 출력합니다. 이렇게 추출한 데이터를 원하는 대로 활용할 수 있습니다.

3. 요소를 추출하는 다양한 방법

JSON 데이터에서 요소를 추출할 때 다양한 방법을 활용할 수 있습니다. 예를 들어, 하위 객체의 요소도 추출할 수 있습니다.

const street = data.address.street;
const city = data.address.city;
const country = data.address.country;

또는, 객체의 특정 프로퍼티만 추출하여 새로운 객체를 생성할 수도 있습니다.

const { name, email } = data;
const extractedData = { name, email };

위의 코드에서 data 객체의 name과 email을 추출하여 extractedData 변수에 새로운 객체로 할당하였습니다.

결론

이번 글에서는 자바스크립트 JSON 데이터를 자바스크립트로 가져와 특정 요소만을 추출하는 방법에 대해 알아보았습니다. fetch() 메소드를 사용하여 JSON 데이터를 가져오고, 추출하고자 하는 요소를 변수에 할당하는 방법을 소개했습니다. 이러한 방법들은 여러분이 JSON 데이터를 자유롭게 조작하고 활용할 수 있도록 도와줄 것입니다.