JavaScript로 JSON 배열에서 데이터 읽는 방법 (JSON.parse 활용)

JavaScript에서 JSON.parse() 메서드를 사용하면 문자열 형태의 JSON 데이터를 자바스크립트 객체 배열로 변환할 수 있으며, forEach() 반복문을 통해 각 요소의 데이터에 손쉽게 접근할 수 있습니다. 다음은 JSON 배열에서 데이터를 읽어오는 전체 예제 코드입니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample,.result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>Read data from JSON array using JavaScript</h1>
<div class="sample">
[{"name":"Rohan","age":22}, {"name":"Shawn","age":12} ,{"name":"Michael","age":21}]
</div>
<div class="result" style="color: green;"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to read data from above JSON array</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let parsedJson = JSON.parse(sampleEle.innerHTML);
    document.querySelector(".Btn").addEventListener("click", () => {
        parsedJson.forEach((item) => {
            resultEle.innerHTML += "Name = " + item.name + "";
            resultEle.innerHTML += "Age = " + item.age + "";
        });
    });
</script>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 화면이 표시됩니다.

JavaScript로 JSON 배열에서 데이터 읽는 방법 (JSON.parse 활용)

'CLICK HERE' 버튼을 클릭하면 JSON 배열의 각 객체에서 이름(name)과 나이(age)가 순서대로 출력됩니다.

JavaScript로 JSON 배열에서 데이터 읽는 방법 (JSON.parse 활용)

코드 설명

1. document.querySelector()를 사용해 샘플 JSON이 담긴 요소(.sample)와 결과를 표시할 요소(.result)를 가져옵니다.
2. JSON.parse(sampleEle.innerHTML)을 통해 HTML에 문자열로 작성된 JSON을 실제 자바스크립트 배열로 변환합니다.
3. 버튼 클릭 시 forEach()가 배열의 각 객체를 순회하며 name과 age 속성 값을 결과 영역에 하나씩 추가합니다.

이처럼 JSON.parse()와 forEach()만 활용하면 별도의 라이브러리 없이도 JSON 배열 데이터를 간단하게 읽고 화면에 렌더링할 수 있습니다.