JSON 데이터를 사람이 읽기 쉬운 형태로 정렬하려면 JSON.parse()와 JSON.stringify()를 함께 사용하면 됩니다. JSON.parse()로 문자열을 객체로 변환한 뒤, JSON.stringify()의 세 번째 인자(들여쓰기 공백 수)를 지정해 다시 문자열로 변환하면 들여쓰기가 적용된 보기 좋은 JSON을 얻을 수 있습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<textarea id="prettyJSONFormat" cols=100 rows=20></textarea>
<button onclick="printTheJSONInPrettyFormat()">버튼을 클릭하여 예쁜 JSON 가져오기</button>
<script>
function printTheJSONInPrettyFormat() {
var badJSON = document.getElementById('prettyJSONFormat').value;
var parseJSON = JSON.parse(badJSON);
var JSONInPrettyFormat = JSON.stringify(parseJSON, undefined, 4);
document.getElementById('prettyJSONFormat').value =
JSONInPrettyFormat;
}
</script>
</body>
</html>코드 설명
위 코드의 핵심 로직은 다음과 같습니다.
- document.getElementById().value: 텍스트 영역(textarea)에 입력된 원본 JSON 문자열을 가져옵니다.
- JSON.parse(): 입력된 문자열을 JavaScript 객체로 변환합니다.
- JSON.stringify(parseJSON, undefined, 4): 객체를 다시 문자열로 변환하면서 세 번째 인자인
4를 통해 각 계층마다 공백 4칸의 들여쓰기를 적용합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server 옵션을 선택하면 됩니다.
출력 결과
프로그램을 실행하면 다음과 같은 화면이 나타납니다.
이제 텍스트 영역에 정렬되지 않은(포맷되지 않은) JSON 데이터를 입력해 보겠습니다. 샘플 JSON 데이터는 아래와 같습니다.
버튼을 클릭하면 다음과 같이 들여쓰기가 올바르게 적용된, 잘 정돈된 JSON 형식의 결과를 확인할 수 있습니다.
참고 사항
입력된 문자열이 유효한 JSON 형식이 아니라면 JSON.parse()에서 오류가 발생합니다. 실무에서는 try-catch 문으로 감싸서 잘못된 입력에 대한 예외 처리를 추가하는 것이 좋습니다.