html嵌入原始数据,关于javascript：如何在HTML页面上显示原始JSON数据

本问题已经有最佳答案，请猛点这里访问。

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/&hellip；。它包括一个简单的代码片段来"完美打印"您的JSON。

谢谢，我刚刚了解到json.stringify(param1，param2，param3)，第三个帮助我解决问题。另一个问题是在我显示的json数据中，存在一些标记，如，实际上我希望它打印一个enter，em，我该怎么做？

除了标记之外，任何HTML标记中的JSON都只是一个文本。因此，就好像在HTML页面中添加了一个故事。

但是，关于格式化，这是另一回事。我想你应该换个题目。

看看这个问题。另请参见本页。

也许你是对的，我的表情有点不对劲。

试试这个简单的东西：codematrics.com/how-to-display-json-data-in-format