JSON.stringify 출력을 div로 예쁜 인쇄 방식으로

JSON.stringify 출력을 div로 예쁜 인쇄 방식으로

---

나는 JSON.stringifyjson 객체로

result = JSON.stringify(message, my_json, 2)

2위의 인수는 꽤 결과를 인쇄 할 예정이다. 내가 같은 것을하면이 작업을 수행합니다 alert(result). 그러나 이것을 div 안에 추가하여 사용자에게 출력하고 싶습니다. 이 작업을 수행하면 한 줄만 표시됩니다. (나는 공백과 공백이 HTML로 해석되지 않기 때문에 작동하지 않는다고 생각합니까?)

{ "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 }

JSON.stringify예쁜 결과로 div에 결과를 출력하는 방법이 있습니까?

---

<pre>태그를 사용하십시오

데모 : http://jsfiddle.net/K83cK/

var data = {
  "data": {
    "x": "1",
    "y": "1",
    "url": "http://url.com"
  },
  "event": "start",
  "show": 1,
  "id": 50
}


document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);

<pre id="json"></pre>

---

JSON 출력이 <pre>태그 에 있는지 확인하십시오 .

---

전체 공개 나는이 패키지의 저자이지만 JSON이나 JavaScript 객체를 읽을 수있는 방식으로 출력하는 다른 방법은 부분을 건너 뛰고 축소 할 수있는 다른 방법입니다 nodedump: https://github.com/ragamufin/nodedump

---

내 제안은 다음을 기반으로합니다.

• 각 '\ n'(줄 바꿈)을 <br>
• 각 공간을 & nbsp;

var x = { "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 };


document.querySelector('#newquote').innerHTML = JSON.stringify(x, null, 6)
     .replace(/\n( *)/g, function (match, p1) {
         return '<br>' + '&nbsp;'.repeat(p1.length);
     });

<div id="newquote"></div>

---

이것이 실제로 사용자를위한 것이라면 텍스트를 출력하는 것보다 낫습니다. https://github.com/padolsey/prettyprint.js 와 같은 라이브러리를 사용 하여 HTML 테이블로 출력 할 수 있습니다 .

---

REST API 리턴을 고려하십시오.

{"Intent":{"Command":"search","SubIntent":null}}

그런 다음 멋진 형식으로 인쇄하려면 다음을 수행하십시오.

<pre id="ciResponseText">Output will de displayed here.</pre>   

var ciResponseText = document.getElementById('ciResponseText');
var obj = JSON.parse(http.response);
ciResponseText.innerHTML = JSON.stringify(obj, undefined, 2);   

---

스타일을 사용 white-space: pre하면 <pre>태그가 바람직하지 않은 텍스트 형식을 수정할 수도 있습니다.

---

귀하의 경우 <pre>그 문자열이 (API를하거나 컨트롤의 일부 기능 / 페이지 출력을 통해) 이미 제공되는 방법이기 때문에 태그가 JSON의 한 줄을 보여주고,이처럼 포맷 할 수 있습니다 :

HTML :

<pre id="json">{"some":"JSON string"}</pre>

자바 스크립트 :

    (function() {
        var element = document.getElementById("json");
        var obj = JSON.parse(element.innerText);
        element.innerHTML = JSON.stringify(obj, undefined, 2);
    })();

또는 jQuery :

    $(formatJson);

    function formatJson() {
        var element = $("#json");
        var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
    }

---

이 저장소를 사용해보십시오 : https://github.com/amelki/json-pretty-html

---

JSX로 구성 요소의 상태를 인쇄

render() {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <pre>
        <code>{JSON.stringify(this.state, null, 4)}</code>
      </pre>
    </div>
  );
}

끈으로 묶다

참고 URL : https://stackoverflow.com/questions/16862627/json-stringify-output-to-div-in-pretty-print-way