HTML로 JSON 표시
사람이 읽을 수 있는 형식으로 포맷된 JSON을 HTML 페이지에 삽입하는 방법에 대한 권장 사항이 있습니까?예를 들어 브라우저에서 XML을 볼 때 대부분의 브라우저에는 XML 형식(부호, 적절한 줄 바꿈 등)이 표시됩니다.JSON도 같은 최종 결과를 원합니다.
색상 구문 강조 표시는 추가 사항입니다.
감사해요.
JSON.stringify 함수는 포맷되지 않은 JSON과 함께 사용할 수 있습니다.포맷된 형식으로 출력됩니다.
JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)
이거 돌아요
{ "foo": "sample", "bar": "sample" }
안으로
{
"foo": "sample",
"bar": "sample"
}
이제 데이터는 @A가 제안하는 Google Code 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>
구문 강조 표시는 code prettify를 사용합니다.이것이 Stack Overflow가 코드 하이라이팅에 사용하는 것이라고 생각합니다.
- 포맷된 JSON을 코드 블록으로 포장하여 "prettyprint" 클래스를 부여합니다.
- 페이지에 prettify.js를 포함합니다.
- 문서의 본문 태그 호출 확인
prettyPrint()로딩할 때
페이지에 나타낸 형식으로 구문이 강조 표시됩니다.예에 대해서는, 여기를 참조해 주세요.따라서 다음과 같은 코드 블록이 있는 경우:
<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과 같은 의미였던 것 같습니다.
사용할 수 있을지 모르겠지만 작성자에게 물어보세요.
이런 거?
예쁜 아들
https://github.com/warfares/pretty-json
라이브 샘플:
http://warfares.github.io/pretty-json/
다음은 OP가 요청한 대로만 수행하는 경량 솔루션입니다. 강조 표시는 물론 다른 작업은 수행하지 않습니다.JavaScript를 사용하여 JSON을 예쁘게 인쇄하려면 어떻게 해야 합니까?
JSON2 사용 가능HTML을 올바른 형식의 HTML 목록으로 변환합니다.필요한 것보다 조금 더 강력할 수도 있지만
디버깅의 관점에서 이 작업을 수행할 경우 JSONovich와 같은 Firefox 플러그인을 사용하여 JSON 콘텐츠를 볼 수 있습니다.
현재 베타판인 Firefox의 새 버전은 이를 기본적으로 지원할 예정입니다(XML과 거의 유사함).
다음은 JSON을 XML로 변환하는 Javascript 툴입니다.이 툴을 사용하면 가독성이 향상됩니다.그런 다음 스타일시트를 작성하여 색상을 지정하거나 HTML로 전체 변환을 수행할 수 있습니다.
http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html
이를 위해 백엔드 언어의 도구를 사용하는 것이 최선의 방법입니다.어떤 언어를 사용하시나요?Ruby의 경우 json_printer를 사용합니다.
SyntaxHighlight는 JavaScript에서 개발된 완전한 기능을 갖춘 코드 구문 형광펜입니다.Syntax Highlight의 기능에 대한 자세한 내용은 데모 페이지를 참조하십시오.
먼저 JSON 문자열을 가져와 실제 객체를 만듭니다.오브젝트의 모든 속성을 루프하여 정렬되지 않은 목록에 항목을 배치합니다.새 객체에 도착할 때마다 새 목록을 만드십시오.
언급URL : https://stackoverflow.com/questions/883977/display-json-as-html
'programing' 카테고리의 다른 글
| 운석을 쓰면 앵귤러가 왜 필요하죠? (0) | 2023.02.25 |
|---|---|
| Angular.js $http.Post TypeError: 정의되지 않은 속성 'data'를 읽을 수 없습니다. (0) | 2023.02.25 |
| 리액트 라우터 v4에서 버튼 클릭을 통해 경로를 탐색하는 방법 (0) | 2023.02.25 |
| $$단계는 AngularJS로 무엇입니까? (0) | 2023.02.25 |
| ASP에 대한 각도Net WebApi, 서버에 CSRF 구현 (0) | 2023.02.25 |