JSON을 HTML로 표시 [닫기]

178

사람이 읽을 수있는 스타일로 형식화 된 JSON을 사용하여 HTML 페이지에 JSON을 포함시키는 방법에 대한 권장 사항이 있습니까? 예를 들어, 브라우저에서 XML을 볼 때 대부분의 브라우저는 XML 형식 (들여 쓰기, 적절한 줄 바꿈 등)을 표시합니다. JSON에 대해 동일한 최종 결과를 원합니다.

색상 구문 강조는 보너스입니다.

감사

html  json 
— 존 무 호우
소스
tohtml.com/javaProperties가 훌륭하게 작동했습니다. 스타일을 "인라인"으로 만듭니다. 간단한 복사하여 붙여 넣기에 매우 유용합니다.
— Andrew Bucklin
내 라이브러리 azimi.me/json-formatter-js를
— Mohsen

답변:

147

형식화되지 않은 JSON과 함께 JSON.stringify 함수를 사용할 수 있습니다. 형식화 된 방식으로 출력합니다.

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

이 차례

{ "foo": "sample", "bar": "sample" }

으로

 {
     "foo": "sample", 
     "bar": "sample" 
 }

이제 데이터는 Google 코드 Prettify를 사용할 수있는 읽기 가능한 형식입니다 에서 제안한대로 스크립트를 입니다. 그것을 색으로 칠하는 레비.

그것은 덧붙였다 가치가 IE7과 이전 버전의 브라우저가 JSON.stringify 방법을 지원하지 않습니다 .

— 남자
소스
4
JSON.stringify를 지원하지 않는 브라우저 (구식 IE에서 나오자 ) 는 기능을 얻는 데 사용할 수있는 훌륭한 polyfill이 있습니다 ( json.org/js.html ). 그 내용 만 포함하면 거의 모든 곳에 적용됩니다.
— John Munsch
1
또 다른 요령은 들여 쓰기 필드 (4) 대신에 <br>을 입력하면 멋진 줄 바꿈을하는 것입니다
— Jonathan
5
가장 좋은 대답은 작업을 수행하고 타사 라이브러리를 포함시킬 필요가 없습니다.
— BlaShadow
1
사람이 포맷 한 JSON을 HTML <textarea> 요소에 표시 해야하는 유스 케이스 에이 효과를 사용했습니다. 일을 잘하는 것 같았습니다.
— CSSian
1
이것을 <pre. 그리고 네 세트, 적어도 디버깅 목적으로, 당신은 CONSOLE.LOG을 사용할 수 없습니다 ()
— sparklos
94

당신이 의도적으로 최종 사용자를 표시하는 경우, 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 뷰어를 사용 합니다.

— RedFilter
소스
10
문자열이 모두 한 줄에 있으면 어떻게됩니까? 어떻게 그렇게 멋지게 형식화합니까?
— geowa4
2
당신은 바위. 이것은 HTML에서 파이썬 JSON을 예쁘게 인쇄하는 방법과 같이 매우 복잡한 질문에 대한 가장 간단한 대답입니다. 감사합니다.
— Marc Cenedella
1
이것이 더 많은 투표를하지 않는 방법을 모른다. 간단하고 쉬운 솔루션.
— anthv123
9
@ geowa4 JSON.stringify(jsonObj, null, ' ')는 2 개의 공백으로 아름답게합니다. 나는 이것이 늦었다는 것을 알고 있지만이 팁이 도움이 될 것이라고 생각했습니다.
— hiPy
2
firefox 경고 : codeplex.com에 입장하면 앞의 사이트에 유해한 프로그램이 포함되어있을 수 있습니다.
— JRichardsz
65

구문 강조를 위해 코드 prettify를 사용하십시오 . 이것이 StackOverflow가 코드 강조 표시에 사용하는 것이라고 생각합니다.

  1. 형식화 된 JSON을 코드 블록으로 감싸서 "prettyprint"클래스를 제공하십시오.
  2. 페이지에 prettify.js를 포함하십시오.
  3. 문서가 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
    }
}

이것은 들여 쓰기에는 도움이되지 않지만 다른 대답 은 그 문제를 해결하는 것으로 보입니다.

— A. 레비
소스
1
이제 모든 Google 코드 저장소는 우리가 직접 새로운 GitHub의의의 repo에 새로운 사용자를 가리키는해야한다 동결됩니다 : https://github.com/google/code-prettify
— adelriosantiago
AJAX 반환 내에서 어떻게 작동하게 할 수 있습니까? 코드는 본문로드에는 없지만 아약스 호출 후에 만 ​​존재합니다.
— toddmo
@toddmo AJAX 반환을 위해 응답 처리기 함수에서 3 단계를 수행 할 수 있어야합니다. 따라서 핸들러는 body onLoad 메소드 대신 prettyPrint를 호출합니다. 나는 그것이 효과가있을 것으로 기대한다.
— A. Levy
Janus Troelsen의 답변이 들어 와서 효과가 있었기 때문에 함께갔습니다. PHP-> HTML을 쉽게 확인해야합니다.
— toddmo
3

JSON2HTML을 사용하여 멋진 형식의 HTML 목록으로 변환 할 수 있습니다. 실제로 필요한 것보다 조금 더 강력 할 수 있습니다

http://json2html.com

— 차드
소스
1
JQuery와 사이트 플러그인처럼 미안 모습은 사라 바이 바이입니다 .. 시도 json2html.com
— 차드 브라운
더 간단한 문제는 github.com/viscocent/JSON2HTML 을 사용해보십시오.
— Viscocent
나는 시각화 도구를 사용하여이 업데이트 거라고 생각 visualizer.json2html.com
— 차드 브라운
1

SyntaxHighlighter 는 JavaScript로 개발 된 완전한 기능을 갖춘 자체 포함 코드 구문 형광펜입니다. SyntaxHighlighter의 기능에 대한 아이디어를 얻으려면 데모 페이지를살펴보십시오.

— 테미 하이
소스
0

디버깅 관점에서이 작업을 수행하려는 경우 JSONovich 와 같은 Firefox 플러그인을 사용 하여 JSON 컨텐츠를 볼 수 있습니다.

현재 베타 버전 인 Firefox의 새로운 버전은 기본적으로이를 지원할 예정입니다 (XML과 매우 유사).

— 아바타
소스
-2

먼저 JSON 문자열을 가져 와서 실제 객체를 만듭니다 . 객체의 모든 속성을 반복하여 항목을 정렬되지 않은 목록에 배치합니다. 새로운 물건을 얻을 때마다 새로운 목록을 만드십시오.

— geowa4
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.