자바스크립트에서 JSON 데이터를 검색하는 방법

10 Sep 2023

javascript

JSON은 자바스크립트 객체 표기법(JSON, JavaScript Object Notation)의 약자로, 데이터를 효율적이고 간결하게 표현하는 형식입니다. 자바스크립트에서는 이러한 JSON 데이터를 다루는 데에 많이 활용됩니다. 이번 글에서는 자바스크립트에서 JSON 데이터를 검색하는 방법에 대해 알아보겠습니다.

1. JSON 검색 방법

JSON 데이터를 검색하려면 다음과 같은 절차를 따를 수 있습니다.

JSON 파싱: JSON 데이터를 자바스크립트 객체로 변환합니다.
검색: 변환된 자바스크립트 객체를 순회하며 원하는 데이터를 찾습니다.

2. JSON 파싱

JSON 데이터를 자바스크립트에서 사용하기 위해서는 먼저 JSON을 자바스크립트 객체로 파싱해야 합니다. 이를 위해서는 JSON.parse() 메서드를 사용합니다. 이 메서드는 JSON 문자열을 자바스크립트 객체로 변환해줍니다.

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
const jsonObj = JSON.parse(jsonString);

console.log(jsonObj.name); // 출력: John
console.log(jsonObj.age); // 출력: 30

3. JSON 데이터 검색

JSON 데이터를 파싱한 후, 원하는 데이터를 검색하기 위해서는 자바스크립트 객체의 속성에 접근하는 방식을 사용합니다. 객체의 속성에 접근하기 위해서는 . 또는 [] 연산자를 사용합니다.

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
const jsonObj = JSON.parse(jsonString);

console.log(jsonObj.name); // 출력: John
console.log(jsonObj["age"]); // 출력: 30

자바스크립트 객체도 중첩된 구조일 수 있으므로, 중첩된 속성에 접근하려면 . 연산자를 연이어 사용하거나, [] 연산자를 여러 번 중첩해서 사용할 수 있습니다.

const jsonString = '{"person": {"name": "John", "age": 30, "city": "New York"}}';
const jsonObj = JSON.parse(jsonString);

console.log(jsonObj.person.name); // 출력: John
console.log(jsonObj["person"]["age"]); // 출력: 30

4. 반복문을 통한 JSON 데이터 검색

JSON 데이터가 배열 형태로 구성되어 있다면, 반복문을 사용하여 원하는 데이터를 검색할 수 있습니다. 예를 들어, 다음과 같은 JSON 배열이 있다고 가정해봅시다.

const jsonArray = '[{"name": "John", "age": 30}, {"name": "Jane", "age": 25}, {"name": "Tom", "age": 35}]';
const jsonObjArray = JSON.parse(jsonArray);

for (let i = 0; i < jsonObjArray.length; i++) {
  console.log(jsonObjArray[i].name);
  console.log(jsonObjArray[i].age);
}

위의 예제는 JSON 배열을 파싱하고, 각각의 객체에 접근하여 원하는 데이터를 출력하는 예시입니다.

마무리

이번 글에서는 자바스크립트에서 JSON 데이터를 검색하는 방법에 대해 알아보았습니다. JSON을 파싱하여 자바스크립트 객체로 변환한 후, 객체의 속성에 접근하여 원하는 데이터를 검색할 수 있습니다. 이러한 방법들을 응용하여 실제 프로젝트에서 JSON 데이터를 효율적으로 활용할 수 있길 바랍니다.