JavaScript에서 JSON을 파싱하여 특정 이름/값 쌍만 출력하는 방법

JSON 데이터를 구문 분석(parse)할 때는 parseJSON() 메서드를 사용하고, 특정 이름/값 쌍을 화면에 표시하거나 처리할 때는 $.each() 함수를 활용하면 됩니다.

예를 들어 다음과 같은 JSON 문자열이 있다고 가정해 보겠습니다. 이 데이터를 jQuery.parseJSON()으로 구문 분석하는 과정은 아래와 같습니다.

const APIData =
'[{"Name":"John","Age":21},{"Name":"David","Age":24},{"Name":"Bob","Age":20}]';
const getObject = jQuery.parseJSON(APIData);

이제 전체 코드를 살펴보고 각 객체에서 "Name" 값만 가져와 출력하는 방법을 알아보겠습니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<script>
    const APIData =
    '[{"Name":"John","Age":21},{"Name":"David","Age":24},{"Name":"Bob","Age":20}]';
    const getObject = jQuery.parseJSON(APIData);
    $.each(getObject, function (k,obj) {
       console.log(obj['Name']);
    });
</script>
</body>
</html>

위 프로그램을 실행하려면 파일 이름을 "anyName.html"(index.html)로 저장한 뒤 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 됩니다.

출력 결과

위 코드를 실행하면 콘솔에 JSON 배열에 담긴 모든 "Name" 값이 순서대로 출력됩니다.

John
David
Bob

JavaScript에서 JSON을 파싱하여 특정 이름/값 쌍만 출력하는 방법

참고: 최신 JavaScript에서는 JSON.parse() 사용 권장

jQuery.parseJSON()은 jQuery 3.0부터 공식적으로 지원 중단(deprecated)되었으며, 내부적으로 표준 JSON.parse()를 호출하는 방식으로 동작합니다. 따라서 최신 프로젝트에서는 jQuery에 의존하지 않고 아래처럼 표준 API를 직접 사용하는 것이 좋습니다.

const getObject = JSON.parse(APIData);
getObject.forEach(obj => console.log(obj.Name));