JSON(JavaScript Object Notation)은 데이터를 효율적으로 저장하고 교환하기 위한 형식입니다. 자바스크립트에서 JSON 형식의 데이터를 가져와 특정 요소를 추출하려면 다음과 같은 방법을 사용할 수 있습니다.

1. JSON 데이터 가져오기

JSON 데이터를 가져오는 첫 번째 단계는 해당 데이터를 자바스크립트로 로드하는 것입니다. 이를 위해 XMLHttpRequest 또는 fetch API를 사용할 수 있습니다. 예를 들어, 다음은 fetch API를 사용하여 JSON 데이터를 가져오는 예시입니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 데이터 추출을 위한 작업 수행
  })
  .catch(error => console.error('Error:', error));

2. 추출하고자 하는 요소 찾기

JSON 데이터를 가져왔으면, 특정 요소를 추출하기 위해 해당 요소의 경로를 찾아야 합니다. JSON 데이터는 계층적인 구조를 가지므로, 객체 내부의 속성에 접근해서 원하는 값을 가져올 수 있습니다. 예를 들어, 다음은 JSON 데이터에서 “name”이라는 속성을 포함하는 객체의 값을 추출하는 예시입니다.

const name = data.name;

경로가 여러 단계로 구성된 경우에는 점 또는 대괄호를 사용하여 요소에 접근할 수 있습니다. 예를 들어, 다음은 JSON 데이터에서 “address” 객체의 “city” 속성을 추출하는 예시입니다.

const city = data.address.city;

3. 추출한 요소 사용하기

추출한 요소를 사용하려면 해당 변수를 사용하여 원하는 작업을 수행할 수 있습니다. 예를 들어, 다음은 추출한 요소를 콘솔에 출력하는 예시입니다.

console.log(name);
console.log(city);

위의 예시에서 name 변수는 “name” 속성의 값을, city 변수는 “address” 객체의 “city” 속성의 값을 나타냅니다.

요약

자바스크립트에서 JSON 데이터를 가져와 특정 요소를 추출하는 방법을 살펴보았습니다. 데이터를 가져오는 API를 사용하여 JSON 데이터를 로드하고, 추출하려는 요소의 경로를 찾은 다음, 해당 요소를 사용하여 원하는 작업을 수행할 수 있습니다. JSON 데이터를 효율적으로 활용하여 웹 애플리케이션 개발에 활용해보세요.