이 포스트에서는 자바스크립트로 JSON 파일을 만드는 방법을 소개합니다.
PHP로 JSON 파일 만들기에서 코딩한 것처럼 생성하는 과정은 간단합니다. 다음과 같습니다.
<!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(){
var obj = new Object();
obj.name = "여자친구"
obj.members = ["소원", "예린", "은하", "유주", "신비", "엄지"];
obj.albums = {"EP 1집": "Season of Glass", "EP 2집": "Flower Bud",
"EP 3집": "Snowflake", "정규 1집": "LOL"};
var obj_s = JSON.stringify(obj);
$("#json_output").html(obj_s);
});
</script>
<title>JSON Generate with jQuery</title>
</head>
<body>
<pre id="json_output"></pre>
</body>
</html>
PHP로 JSON 파일 만들기와 같습니다. 제이쿼리를 사용하지 않고도 간단하지만 여기서는 제이쿼리를 사용하였습니다. 먼저 객체 변수를 만들어 놓고 name 키에는 ‘여자친구’라는 문자열 값을 대입하고 members 키에는 멤버 목록 배열을 대입, albums 키에는 “EP 1집”: “Season of Glass” 식의 데이터를 갖는 하위 오브젝트를 대입합니다.
이렇게 생성된 오브젝트를 14번 줄과 같이 JSON 문자열로 변환하기 위해 JSON.stringify 메소드를 사용합니다. 그리고 문자열로 변환된 오브젝트를 출력하는 코드를 넣어서 확인하면,
{"name":"여자친구","members":["소원","예린","은하","유주","신비","엄지"],"albums":{"EP 1집":"Season of Glass","EP 2집":"Flower Bud","EP 3집":"Snowflake","정규 1집":"LOL"}}
이렇게 문자열화된 오브젝트가 화면에 표시됩니다. 하지만 한 줄에 뭉쳐서 표시되어 읽기가 어렵기 때문에
var obj_s = JSON.stringify(obj, null, "\t");
이와 같이 옵션을 부여하여 다시 생성해 보면,
{
"name": "여자친구",
"members": [
"소원",
"예린",
"은하",
"유주",
"신비",
"엄지"
],
"albums": {
"EP 1집": "Season of Glass",
"EP 2집": "Flower Bud",
"EP 3집": "Snowflake",
"정규 1집": "LOL"
}
}
읽기 좋게 가지런히 정렬되어 있습니다.
이제 이 코드를 다운로드할 수 있는 파일로 만들어 보겠습니다.
<!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(){
var obj = new Object();
obj.name = "여자친구"
obj.members = ["소원", "예린", "은하", "유주", "신비", "엄지"];
obj.albums = {"EP 1집": "Season of Glass", "EP 2집": "Flower Bud",
"EP 3집": "Snowflake", "정규 1집": "LOL"};
var obj_s = JSON.stringify(obj, null, "\t");
var dataUri = "data:application/json;charset=utf-8,"+ encodeURIComponent(obj_s);
var link = $("#link").attr("href", dataUri);
});
</script>
<title>JSON Generate with jQuery</title>
</head>
<body>
<a href="#" id="link" download="sample.json">download</a>
</body>
</html>
JSON 데이터 헤더와 함께 문자열화된 오브젝트를 encodeURIComponent 함수를 사용하여 UTF-8로 인코딩해서 JSON 문서 파일로 만듭니다. 그리고 이를 아이디가 link인 a 요소의 링크 주소로 사용합니다. 여기서 download를 누르면, download 속성값에 지정된 sample.json 파일로 이 JSON 문서가 다운로드됩니다.
이렇게 해서 자바스크립트로 JSON 파일을 만들어 볼 수 있습니다.