本问题已经有最佳答案,请猛点这里访问。
Possible Duplicate:
JSON pretty print using JavaScript
我想在HTML页面上显示我的原始JSON数据,就像JSONVIEW一样。例如,我的原始JSON数据是:
{
"hey":"guy",
"anumber":243,
"anobject":{
"whoa":"nuts",
"anarray":[
1,
2,
"three"
],
"more":"stuff"
},
"awesome":true,
"bogus":false,
"meaning":null,
"japanese":"明日がある。",
"link":"http://jsonview.com",
"notLink":"http://jsonview.com is great"
}
它来自http://jsonview.com/,如果您使用chrome并安装了jsonview插件,我想要实现的是http://jsonview.com/example.json。
我试过但没能理解它是如何工作的。我想使用一个JS脚本(CSS来突出显示)来定制我的原始JSON数据的格式,这些数据是由Ajax检索到的,最后将它放在HTML页面的任何位置,比如DIV元素中。有没有现有的JS库可以实现这一点?或者怎么做?
尝试语法荧光笔插件。
json漂亮打印到块的示例-jsfiddle.net/k83ck
你应该试试块。它很简单,工作也很好。
我认为在HTML页面上显示数据只需要JSON.stringify。
例如,如果您的JSON是这样存储的:
var jsonVar = {
text:"example",
number: 1
};
然后只需执行此操作即可将其转换为字符串:
var jsonStr = JSON.stringify(jsonVar);
然后可以直接插入HTML,例如:
document.body.innerHTML = jsonStr;
当然,您可能希望通过getElementById将body替换为其他元素。
至于问题的css部分,在将其放入DOM之前,可以使用regexp来操作字符串化对象。例如,此代码(出于演示目的也在jfiddle上)应该注意大括号的缩进。
var jsonVar = {
text:"example",
number: 1,
obj: {
"more text":"another example"
},
obj2: {
"yet more text":"yet another example"
}
}, // THE RAW OBJECT
jsonStr = JSON.stringify(jsonVar), // THE OBJECT STRINGIFIED
regeStr = '', // A EMPTY STRING TO EVENTUALLY HOLD THE FORMATTED STRINGIFIED OBJECT
f = {
brace: 0
}; // AN OBJECT FOR TRACKING INCREMENTS/DECREMENTS,
// IN PARTICULAR CURLY BRACES (OTHER PROPERTIES COULD BE ADDED)
regeStr = jsonStr.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (m, p1) {
var rtnFn = function() {
return '' + p1 + '';
},
rtnStr = 0;
if (p1.lastIndexOf('{') === (p1.length - 1)) {
rtnStr = rtnFn();
f['brace'] += 1;
} else if (p1.indexOf('}') === 0) {
f['brace'] -= 1;
rtnStr = rtnFn();
} else {
rtnStr = rtnFn();
}
return rtnStr;
});
document.body.innerHTML += regeStr; // appends the result to the body of the HTML document
这段代码只是在字符串中查找对象的各个部分,并将它们分隔成div(尽管您可以更改其中的html部分)。但是,每次遇到大括号时,它都会根据缩进是左大括号还是右大括号(类似于'json.stringify'的空格参数的行为)来增加或减少缩进。但您可以将其作为不同格式的基础。
这个问题在我发表答案时显然已经结束了。我将把我的答案留在这里,以防它对任何人都有用,除了对已确定的问题给出的答案代码(这个问题可能是重复的)比我的更神奇一点:—)
非常感谢!!我想试试你的方法。我的HTML页面添加了jquery库,我想知道是否还有其他一些基于jquery的库,这样我才能实现我的目标。我想轻松编码…主要是因为我不擅长javascript。-我会尝试的!
这是一个很长的解决方案。意思有点复杂。我找到了一个棘手的解决方案,通过它我可以以更好的格式显示JSON数据。下面是您的解决方案:codematrics.com/how-to-display-json-data-in-format
请注意,您提供的链接不是HTML页面,而是JSON文档。格式化由浏览器完成。
你必须决定是否:
您希望显示原始JSON(而不是HTML页面),如您的示例中所示。
显示带格式化JSON的HTML页
如果您想要1,只需告诉您的应用程序用JSON呈现一个响应体,设置mime类型(application/json)等。在这种情况下,格式由浏览器(和/或浏览器插件)处理。
如果是2,则需要用JSON呈现一个简单的最小HTML页面,在这里您可以用多种方式突出显示它:
服务器端,取决于您的堆栈。几乎每种语言都有解决方案
客户端的javascript突出显示库。
如果您提供关于您的堆栈的更多详细信息,则更容易提供示例或资源。
编辑:例如,对于客户端JS突出显示,您可以尝试higlight.js。
很抱歉,英语不是我的母语。我想要的是2。真正的例子是这样的:我通过一个div元素获取数据,然后放入一个html页面。原始数据是不可读的,所以我想像jsonview那样格式化它,但是jsonview只格式化从服务器获取的json数据,不包含html元素。
对于hightlight.js,我已经尝试过了,但似乎不起作用。json数据只显示在一行中,我不知道为什么。我查看了源文件,似乎json数据行是用
编写的……e,我无法从softwaremaniacs.org/soft/highlight/en/description获取更多文档……
你好,妈。在这种情况下,我建议您查看此页面顶部的链接:stackoverflow.com/questions/4810841/…。它包括一个简单的代码片段来"完美打印"您的JSON。
谢谢,我刚刚了解到json.stringify(param1,param2,param3),第三个帮助我解决问题。另一个问题是在我显示的json数据中,存在一些标记,如,实际上我希望它打印一个enter,em,我该怎么做?
除了标记之外,任何HTML标记中的JSON都只是一个文本。因此,就好像在HTML页面中添加了一个故事。
但是,关于格式化,这是另一回事。我想你应该换个题目。
看看这个问题。另请参见本页。
也许你是对的,我的表情有点不对劲。
试试这个简单的东西:codematrics.com/how-to-display-json-data-in-format