JSON.stringify以漂亮的打印方式输出到div

Question

我JSON.stringify一个json对象

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？

Answer 1

请使用<pre>标签

但是：ぁzxswい

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);

Answer 2

使用JSX打印组件的状态

https://github.com/amelki/json-pretty-html

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

Answer 3

确保JSON输出位于<pre id="json"></pre>标记中。

Answer 4

完全公开我是这个包的作者，但另一种以可读的方式输出JSON或JavaScript对象的方法是能够跳过部分，折叠它们等等，是<pre>，nodedump

Answer 5

如果这对用户来说真的比输出文本更好，你可以使用像这样的库https://github.com/ragamufin/nodedump将它输出为HTML表格。

Answer 6

考虑您的REST API返回：

https://github.com/padolsey/prettyprint.js

然后，您可以执行以下操作以良好的格式打印它：

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

Answer 7

使用样式

<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标签也修改了可能不合需要的文本格式。

Answer 8

我的提议基于：

• 用<br>替换每个'\ n'（换行符）
• 用＆nbsp;替换每个空格

<pre>

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);
     });

Answer 9

如果你的<div id="newquote"></div>标签显示单行JSON，因为这就是字符串的提供方式（通过api或某个函数/页面出你的控件），你可以像这样重新格式化：

HTML：

<pre>

JavaScript的：

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

或者jQuery：

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

Answer 10

你可以尝试这个存储库：

    $(formatJson);

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