[JavaScript/jQuery] JSON.stringify - 입력한 json 데이터 정렬

JSON.stringify란

JavaScript 객체나 값들을 JSON 형식의 문자열로 변환해주는 기능을 합니다.

JSON.stringify(value, replacer, space);

value: JSON 형식으로 데이터
replacer(필수x) : 입력한 키에 해당하는 데이터만 가져오거나, 함수를 호출해서 특정 데이터들을 수정할 수 있음
space(필수x) : 들여쓰기를 하는 수치 (1 = 스페이스 1번) => json형태로 정렬해서 출력해주기 위해 사용

 

 

javascript

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 	$(function(){
		//test();
	});
	function test(){
		var stringData = $('#textAreaInput').val();
		try {
			var parsedData = JSON.parse(stringData);
			$('#textAreaOutput').val(JSON.stringify(parsedData, null, 4));
		}catch(error){
			alert("JSON형식이 올바르지 않습니다.");
		}
	}
</script>

상단 textAreaInput에 입력된 데이터를 받아와서 Json형태로 변환하고 Jsonstringify를 이용해서 정렬한 뒤 textAreaOutput에 출력해줍니다.(json형태에 부합하지 않을시 에러 출력)

 

html

<textarea id="textAreaInput" style="height: 100px; width: 196px;">[{"data": ["A", "B", "C"], "number": [1, 2, 3]}]</textarea><br>
<button onclick="test()" style="width: 196px; border: 1px gray solid;  background: lightgray; color: black;">변환</button><br><br>
<textarea id="textAreaOutput" style="height: 400px; width: 196px;"></textarea>

 

 

예제

[{"data": ["A", "B", "C"], "number": [1, 2, 3]}]