json 정렬

json 스트링이 한눈에 읽기 불편하게 한줄로 나열되어 있다면 to-be처럼 한눈에 보기 좋에 변경가능하다.

as-is	{ 'id' : 'ppusari', 'pw' : '1234', 'Input' : { 'Url' : 'http://www.google.com' }, 'Outputs' : [ { 'Key' : 'filename', 'PresetId' : 'webm' }, { 'Key' : 'filename2', 'PresetId' : 'h264', 'Captions' : 'test.smi' } ] }
to-be	{   "id" : "ppusari",   "pw" : "1234",   "Input" : {     "Url" : "http://www.naver.com"   },   "Outputs" : [ {     "Key" : "filename",     "PresetId" : "webm"   }, {     "Key" : "filename2",     "PresetId" : "h264",     "Captions" : "test.smi"   } ] }

 

한줄로 길게 나타난 json 데이터를 자동 줄바꿈을 하여 보기 좋게 출력하는 소스

<style type="text/css">
    body {
        white-space: pre;
        font-family: monospace; 
    }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#convertBeautify").click(function(event) {              
            var jsonDataVal = $("#jsonTextArea").val();    // textarea의 데이터를 가져온다.
            jsonDataVal = jsonDataVal.replace(/\\/g,'');    // 특정문자 역슬러쉬 제거
            var jsonData = JSON.parse(jsonDataVal);         // json object로 만든다.

            $("#convertResult").empty();                       // 이전에 출력했던 데이터를 지운다.
            $("#convertResult").append(document.createTextNode(JSON.stringify(jsonData, null, 4)));                
        });         
    }); 
</script>

 

기타 여러 사이트에서도 제공한다.

• https://jsonbeautifier.org/
• https://jsonparser.org/

 

PostMan 에서도  Beautify 버튼을 통해  가능하다.

 

우측 주간쯤에 있는 Beautify 버튼을 클릭하면 됨.