JavaScript 포맷 표시 JSON

결론 을 먼저 말 하고 JSON. stringify 방법 으로 세 번 째 매개 변 수 를 포맷 하여 표시 합 니 다. pre 태그 로 빈 칸 과 줄 바 꿈 자 를 유지 합 니 다.

JavaScript:
const jsonString = JSON.stringify(testjson, null, '\t');
Html:
<pre> jsonString <pre>

1 과정
최근 에 손 으로 화면 을 비 벼 야 합 니 다. restful API 를 통 해 제 이 슨 데 이 터 를 얻 었 습 니 다. 이렇게 화면 에 표시 되 어 복 제 를 편리 하 게 검사 하 기 를 바 랍 니 다.

{
		name: "  ",
		age: 23,
		region: 'cn-northwest-1'
}

p 탭 으로 표시 하려 고 합 니 다.

<p>data<p>

1. 오 브 젝 트 를 바로 하나 들 어 갑 니 다. 이거.

[object Object]

2 JSON string 으로 포맷 하기:

const jsonString = JSON.stringify(testjson)

이것 보이 기

{"name":"  ","age":23,"region":"cn-northwest-1"}

3 MDN 에서 JSON. stringify 를 찾 는 방법https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
세 번 째 매개 변 수 를 포맷 해서 표시 할 수 있 습 니 다.

const jsonString = JSON.stringify(testjson, null, '\t')

디 버 깅 창 에서 포맷 출력 을 출력 하 는 것 은 정상 이지 만 실제로 p 탭 에 표시 하면 이렇게 됩 니 다.

{ "name": "  ", "age": 23, "region": "cn-northwest-1" }

4. 한참 을 찾 았 더 니 p 태그 가 잘못 사용 되 었 습 니 다. pre 태그 pre 요 소 를 사용 하여 미리 포맷 한 텍스트 를 정의 해 야 합 니 다.pre 요소 에 포 위 된 텍스트 는 보통 빈 칸 과 줄 바 꿈 자 를 유지 합 니 다.텍스트 도 등 폭 글꼴 로 표 시 됩 니 다.탭 의 일반적인 응용 은 컴퓨터 의 소스 코드 를 나타 내 는 데 쓰 인 다.pre 탭 으로 바 꾸 면 JSON. stringify (testjson, null, '\ t') 포맷 출력 문자열 을 유지 할 수 있 습 니 다.

<pre>data<pre>

2 테스트 코드
테스트 코드, 로 컬 html 파일 로 저장 하면 테스트 할 수 있 습 니 다.

<div id="list">
	<p id="title">JSON    </p>
</div>

<script>
	const testjson = {
		name: "  ",
		age: 23,
		region: 'cn-northwest-1',
	}
	const list = document.getElementById('list');
  const object = document.createElement('pre');
	const JsonString = document.createElement('pre');
	const JsonStringFormat = document.createElement('pre');
	const JsonStringFormatPLabel = document.createElement('p');

	setTimeout(() => {
		object.innerHTML = `${testjson}`;
		list.appendChild(object);
	},1000);
	
	setTimeout(() => {
		JsonString.innerHTML = `${JSON.stringify(testjson)}`;
		list.appendChild(JsonString);
	},1500);
	
	setTimeout(() => {
		JsonStringFormat.innerHTML = JSON.stringify(testjson, null, '\t');
		list.appendChild(JsonStringFormat);
	},2000);
	
	setTimeout(() => {
		JsonStringFormatPLabel.innerHTML = JSON.stringify(testjson, null, '\t');
		list.appendChild(JsonStringFormatPLabel);
	},2000);
</script>