我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在一个漂亮的打印方式?


当前回答

如果你的<pre>标签显示了一行JSON,因为这是字符串已经提供的方式(通过api或一些你无法控制的函数/页面),你可以像这样重新格式化它:

HTML:

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

JavaScript:

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

其他回答

这是给拉拉维尔的,代码点火者 目录: <pre class=“jsonPre”> </pre>

控制器:返回来自控制器的JSON值

返回json_encode($data, JSON_PRETTY_PRINT);

在脚本: <脚本> $ (' .jsonPre ') . html(结果);> < /脚本

结果将是

确保JSON输出在<pre>标记中。

请使用<pre>标签

演示:http://jsfiddle.net/K83cK/

Var数据= { "数据":{ “x”:“1”, “y”:“1”, “url”:“http://url.com” }, “事件”:“开始”, “秀”:1、 “id”:50 } . getelementbyid (json)。textContent = JSON。Stringify (data, undefined, 2); < pre id = " json " > < / >之前

如果这确实是为用户准备的,比仅仅输出文本更好,您可以使用像https://github.com/padolsey/prettyprint.js这样的库将其输出为HTML表。

使用JSX打印组件的状态

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

stringify