자바스크립트로 JSON 파싱하기 (jQuery)

이 포스트에서는 제이쿼리를 써서 JSON 데이터를 파싱하는 방법을 설명합니다.

JSON 데이터 파싱 방법은 기본적으로는 XML 파싱할 때와 같지만, JavaScript Object Notation이라는 의미답게 XML 파싱에 비해 코드가 간결해진다는 특징이 있습니다.

우선 JSON 문서가 다음과 같이 있다고 가정합니다. (편의를 위해 데이터를 여러 줄에 걸쳐서 전개하였습니다.)

{
    "name": "여자친구",
    "members": [
        "소원",
        "예린",
        "은하",
        "유주",
        "신비",
        "엄지"
    ],
    "albums": {
        "EP 1집": "Season of Glass",
        "EP 2집": "Flower Bud",
        "EP 3집": "SNOWFLAKE",
        "정규 1집": "LOL",
        "EP 4집": "THE AWAKENING"
    }
}

이 JSON 문서의 파일 이름이 json_sample.json이라고 가정하고 HTML 문서를 하나 만들어 봅니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$.getJSON( "json_sample.json", function( data ) {
					$("#gname").html(data["name"]);
					$(data["members"]).each(function(i, member) {
						if (i != 0) { $("#members").append(", "); }
						$("#members").append(member);
					});
					$.each(data["albums"], function(key, value) {
						$("#albums").append("<li>" + key + ": " + value + "</li>\n");
					});
				});
			});
		</script>
		<title>JSON Sample with jQuery</title>
	</head>

	<body>
		<h2 id="gname"></h2>
		<p>멤버 구성: <span id="members"></span></p>
		<h3>앨범 목록</h3>
		<ul id="albums"></ul>
	</body>
</html>

XML 파싱 코드 작성할 때보다 코드 길이가 확실히 짧아졌습니다. 이 코드를 설명하자면,

8번 줄에서 json_sample.json 파일을 읽은 다음 이를 data라는 변수에 대입합니다. 그러면 data는 json_sample.json의 내용을 담은 객체 변수가 됩니다. 여기서 name이라는 키값에 해당하는 데이터를 추출하여 ID가 gname인 요소에 넣습니다. 그리고 members라는 키값에 해당하는 데이터는 배열이므로 그 배열의 원소 수만큼 반복하는 반복문을 만들어서 그 배열의 원소 값을 차례로 ID가 members인 요소에 추가합니다.

마지막으로 albums라는 키값에 해당하는 데이터를 추출해서 넣을 차례인데 이 데이터는 객체로 되어 있습니다. 즉, 객체 안에 객체가 있는 형태입니다. 이럴 때는 객체의 내용을 추출하기 위해 $.each(객체, function(키, 값) { }); 식으로 작성합니다. 이 코드에서는 data[“albums”] 객체의 데이터를 key와 value로 나눠서 추출합니다. 그리고 각 원소마다 <li>key: value</li> 식으로 추가(예: ‘EP 1집: Season of Glass’)되게 합니다.

그러면 다음과 같이 표시될 것입니다.

여자친구

멤버 구성: 소원, 예린, 은하, 유주, 신비, 엄지

앨범 목록
  • EP 1집: Season of Glass
  • EP 2집: Flower Bud
  • EP 3집: SNOWFLAKE
  • 정규 1집: LOL
  • EP 4집: THE AWAKENING

이렇게 파싱된 JSON 데이터가 표시되면 성공입니다.

“자바스크립트로 JSON 파싱하기 (jQuery)”의 4개의 생각

  1. 똑같이 복붙을 해봐도 json 파싱된 내용이 웹 브라우저에 표시가 안됩니다 ㅠ
    혹시 json파일을 저장할 때 특별한 규칙같은게 있나요?

    1. https://jsonlint.com/
      위의 사이트에 들어가면 입력한 JSON이 올바른 형식인지 알 수 있는 기능이 제공됩니다.

      JSON을 만들 때 배열의 형태가 어떤 형태인가에 따라 다른데, 값마다 속성이 있는 배열은 {} 괄호 안에 넣어서 "속성": 값 식으로 서술하고(예: {"name": "여자친구"}), 값에 속성이 없는 배열은 [] 괄호 안에 나열합니다.(예: ["소원", "예린", "은하", "유주", "신비", "엄지"])

      JSON 파일을 메모장으로 저장할 때 UTF-8로 저장하면 바이트 순서 표식(BOM) 문자를 붙이는데 이 문자 때문에 잘못된 JSON으로 인식하는 경우가 있습니다. 이를 해결하려면 유니코드로 저장하되 BOM 문자를 안 붙이고 저장하는 기능이 있는 텍스트 편집기(Notepad++ 등)로 저장하면 됩니다.

  2. 안녕하세요. 포스팅 보고 안되서 질문 남깁니다.

    이전에 JSON파일을 메모장으로 하면 문제가 생길 수 있다고 하셔서,
    NOTEPAD++을 설치해서
    인코딩 -> UTF-8(BOM없음) 으로도 실행해보고,
    인코딩 -> UCS-2 리틀, 빅 엔디언으로 해봤는데,
    모든 경우가 다

    멤버구성:

    앨범목록

    이런식으로 표기 되더라구요. 혹시 해결방법 아시는지 여쭤봅니다.

    1. Notepad++로 BOM 없는 UTF-8로 저장해도 역시 읽지를 못하는 문제인가요?
      구체적으로 어떤 오류인지는 알 수 없어 확답은 못 드립니다만, 다음 경우를 생각해 볼 수 있습니다.

      첫째, 파일 이름이 잘못된 경우: 이 예제에서는 JSON 파일 이름이 json_sample.json으로 되어 있는데 실제 파일 이름이 json_sample.json이 아닌 다른 이름이거나, json_sample.json은 맞는데 다른 경로에 있어서 찾지 못하는 경우가 있습니다. 경로를 확인 후 올바르게 수정하면 됩니다.

      경로가 올바른데 여전히 안 된다면,
      둘째, 하드디스크에 있는 파일을 직접 불러오는 경우 file:/// 프로토콜로 되는데, 보안상의 문제로 인해 AJAX는 file 프로토콜을 차단합니다. 제가 사용하는 크롬 기준으로 AJAX는 http, data, chrome, chrome-extension, https 이렇게 다섯 가지 프로토콜만 허용됩니다.
      따라서, 하드디스크에 저장해 놓고 직접 불러오는 방식을 쓰면 안 되고 웹 호스팅에 올려서 액세스해 보아야 합니다. 만약 웹 호스팅이 없다면 ‘파이썬으로 간단한 웹 서버 구성해 보기'(https://pjw48.net/wordpress/2017/06/04/simple-http-server-py/) 포스트에 서술된 방법대로(굳이 파이썬이어야 할 필요는 없고 Node.js나 다른 프레임워크로 해도 무방합니다) 작업하시는 데스크톱 컴퓨터를 임시 웹 서버로 만들어서 테스트해 보실 수 있습니다.

      그래도 안 된다면 답글 부탁드립니다.

안현태에 답글 남기기 응답 취소

이메일 주소는 공개되지 않습니다.