사람이 읽을 수있는 스타일로 형식화 된 JSON을 사용하여 HTML 페이지에 JSON을 포함시키는 방법에 대한 권장 사항이 있습니까? 예를 들어, 브라우저에서 XML을 볼 때 대부분의 브라우저는 XML 형식 (들여 쓰기, 적절한 줄 바꿈 등)을 표시합니다. JSON에 대해 동일한 최종 결과를 원합니다.
색상 구문 강조는 보너스입니다.
감사
답변
형식화되지 않은 JSON과 함께 JSON.stringify 함수를 사용할 수 있습니다. 형식화 된 방식으로 출력합니다.
JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)이 차례
{ "foo": "sample", "bar": "sample" }으로
{
"foo": "sample",
"bar": "sample"
}이제 데이터는 Google 코드 Prettify를 사용할 수있는 읽기 가능한 형식입니다 에서 제안한대로 스크립트를 입니다. 그것을 색으로 칠하는 레비.
그것은 덧붙였다 가치가 IE7과 이전 버전의 브라우저가 JSON.stringify 방법을 지원하지 않습니다 .
답변
당신이 의도적으로 최종 사용자를 표시하는 경우, JSON의 텍스트 포장 <PRE>및 <CODE>태그, 예를 :
<html>
<body>
<pre>
<code>
[
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f0"
},
{
color: "blue",
value: "#00f"
},
{
color: "cyan",
value: "#0ff"
},
{
color: "magenta",
value: "#f0f"
},
{
color: "yellow",
value: "#ff0"
},
{
color: "black",
value: "#000"
}
]
</code>
</pre>
</body>
</html>그렇지 않으면 JSON 뷰어를 사용 합니다.
답변
구문 강조를 위해 코드 prettify를 사용하십시오 . 이것이 StackOverflow가 코드 강조 표시에 사용하는 것이라고 생각합니다.
- 형식화 된 JSON을 코드 블록으로 감싸서 “prettyprint”클래스를 제공하십시오.
- 페이지에 prettify.js를 포함하십시오.
- 문서가
prettyPrint()로드 될 때 문서의 본문 태그 호출을 확인하십시오
페이지에 배치 한 형식으로 구문 강조 JSON이 표시됩니다. 예를 보려면 여기를 참조 하십시오 . 따라서 다음과 같은 코드 블록이 있다면 :
<code class="prettyprint">
var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
</code>다음과 같이 보일 것입니다 :
var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}이것은 들여 쓰기에는 도움이되지 않지만 다른 대답 은 그 문제를 해결하는 것으로 보입니다.
답변
JSON Visualization 과 같은 것을 의미한다고 생각합니다.
당신이 그것을 사용할 수 있는지 모르지만 저자에게 요청할 수 있습니다.