我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>标签
演示: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 " > < / >之前
其他回答
很多人会对这些问题做出非常奇怪的回答，这就造成了不必要的工作量。
做到这一点最简单的方法包括以下内容
使用JSON. Parse (value)解析JSON字符串 - JSON.stringify(input,undefined,2) 将输出设置为步骤2的值。
在实际代码中，一个例子是(将所有步骤组合在一起):
var input = document.getElementById("input").value;
document.getElementById("output").value = JSON.stringify(JSON.parse(input),undefined,2);
输出。value将是你想要显示美化的JSON的区域。
如果你使用React，你也可以使用React -json-tree包。
我为它创建了一个组件，如下所示，接受一个数据道具。
import React from 'react';
import JSONTree from 'react-json-tree'
import './style.css';
const theme = {
scheme: 'monokai',
base00: '#272822',
base01: '#383830',
base02: '#49483e',
base03: '#75715e',
base04: '#a59f85',
base05: '#f8f8f2',
base06: '#f5f4f1',
base07: '#f9f8f5',
base08: '#f92672',
base09: '#fd971f',
base0A: '#f4bf75',
base0B: '#a6e22e',
base0C: '#a1efe4',
base0D: '#66d9ef',
base0E: '#ae81ff',
base0F: '#cc6633',
};
const TreeView = (props) => {
return (
<div className="tree-container">
<JSONTree
data={props.data}
theme={theme}
invertTheme={true}
hideRoot
labelRenderer={([key]) => {
return <strong>{key}:</strong>
}}
valueRenderer={(valueAsString, value) => {
return <span className="capitalize">{value}</span>;
}}
getItemString={() => ''}
/>
</div>
);
}
export default TreeView;
然后我在导入组件后在html元素中使用它，如下所示。
<div>
<TreeView data={s.value} />
</div>
这是给拉拉维尔的，代码点火者 目录： <pre class=“jsonPre”> </pre>
控制器:返回来自控制器的JSON值
返回json_encode($data, JSON_PRETTY_PRINT);
在脚本: <脚本> $ (' .jsonPre ') . html(结果);> < /脚本
结果将是
如果你的<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));
}
完全披露我是这个包的作者，但另一种以可读的方式输出JSON或JavaScript对象的方法是nodedump, https://github.com/ragamufin/nodedump
