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

10 Sep 2023

javascript

JSON(JavaScript Object Notation)은 데이터를 효과적으로 표현하기 위해 사용되는 텍스트 형식입니다. 자바스크립트에서는 JSON 데이터를 가져와서 처리하고 분석하는 방법이 중요합니다. 이 글에서는 자바스크립트에서 JSON 데이터를 어떻게 가져오고 분석하는지 알아보겠습니다.

1. JSON 데이터 가져오기

JSON 데이터를 자바스크립트에서 가져오려면 AJAX(Asynchronous JavaScript And XML)를 사용해야 합니다. AJAX를 사용하여 서버에서 JSON 데이터를 비동기적으로 가져올 수 있습니다.

아래의 코드는 AJAX를 사용하여 서버에서 JSON 데이터를 가져오는 예시입니다.

const url = "https://api.example.com/data"; // JSON 데이터가 있는 URL
const xhr = new XMLHttpRequest(); // AJAX 요청을 위한 XMLHttpRequest 객체 생성

xhr.onload = function() {
    if (xhr.status === 200) { // 요청이 성공한 경우
        const jsonData = JSON.parse(xhr.responseText); // JSON 데이터 파싱
        console.log(jsonData);
    } else {
        console.error("Error: " + xhr.status); // 요청이 실패한 경우
    }
};

xhr.open("GET", url, true); // GET 요청으로 데이터 가져옴
xhr.send(); // 요청 전송

위 코드에서 url은 JSON 데이터가 있는 URL을 의미합니다. onload 핸들러는 요청이 성공하면 실행되며, xhr.responseText를 통해 받은 JSON 데이터를 문자열로 얻을 수 있습니다. JSON.parse() 메서드를 사용하여 자바스크립트 객체로 변환한 후 원하는 작업을 수행할 수 있습니다.

2. JSON 데이터 분석하기

JSON 데이터를 자바스크립트에서 분석하려면 자바스크립트 객체로 변환해야 합니다. 이렇게 변환한 객체를 사용하여 데이터를 읽고 조작할 수 있습니다.

아래의 예시 코드는 JSON 데이터를 자바스크립트 객체로 변환한 후 해당 데이터를 분석하는 예시입니다.

const jsonData = '{"name":"John", "age":30, "city":"New York"}'; // JSON 데이터 문자열

const obj = JSON.parse(jsonData); // JSON 데이터를 자바스크립트 객체로 변환

console.log("이름: " + obj.name); // "John" 출력
console.log("나이: " + obj.age); // 30 출력
console.log("도시: " + obj.city); // "New York" 출력

위 코드에서 jsonData는 JSON 데이터를 담은 문자열입니다. JSON.parse() 메서드를 사용하여 jsonData 문자열을 자바스크립트 객체로 변환합니다. 그 후 변환된 객체의 속성을 사용하여 데이터에 접근할 수 있습니다.

3. JSON 배열 분석하기

JSON 데이터에는 배열 형식으로 여러 개의 항목이 포함될 수 있습니다. 이러한 배열 데이터를 분석하는 방법도 중요합니다.

아래의 예시 코드는 JSON 배열 데이터를 자바스크립트 배열로 변환한 후 해당 데이터를 분석하는 예시입니다.

const jsonArray = '[{"name":"John", "age":30}, {"name":"Jane", "age":25}, {"name":"Adam", "age":35}]'; // JSON 배열 데이터 문자열

const array = JSON.parse(jsonArray); // JSON 배열 데이터를 자바스크립트 배열로 변환

for (let i = 0; i < array.length; i++) {
    console.log("이름: " + array[i].name);
    console.log("나이: " + array[i].age);
}

위 코드에서 jsonArray는 JSON 배열 데이터를 담은 문자열입니다. JSON.parse() 메서드를 사용하여 jsonArray 문자열을 자바스크립트 배열로 변환합니다. 그 후 for 반복문을 사용하여 자바스크립트 배열의 각 요소를 순회하며 데이터에 접근할 수 있습니다.

정리하자면, 자바스크립트에서 JSON 데이터를 가져와서 분석하는 방법은 AJAX를 사용하여 JSON 데이터를 가져온 후 JSON.parse() 메서드를 사용하여 자바스크립트 객체 또는 배열로 변환하는 것입니다. 변환된 객체나 배열을 사용하여 데이터를 읽고 조작할 수 있습니다.