如何在HTML页面上显示原始JSON数据

Question

可能重复:
使用JavaScript的JSON漂亮打印

我想像在JSONview上那样在HTML页面上显示我的原始JSON数据.例如,我的原始json数据是:

  {
   "hey":"guy",
   "anumber":243,
   "anobject":{
      "whoa":"nuts",
      "anarray":[
         1,
         2,
         "thr<h1>ee"
      ],
      "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来突出显示)自定义格式化由ajax检索的原始JSON数据,最后将它放在任何位置的HTML页面上,如div元素.是否有任何现有的JS库可以实现这一目标？或者怎么做？

Answer 1

我认为你需要在HTML页面上显示数据JSON.stringify.

例如,如果您的JSON存储如下:

var jsonVar = {
        text: "example",
        number: 1
    };

然后你只需要这样做把它转换成一个字符串:

var jsonStr = JSON.stringify(jsonVar);

然后您可以直接插入HTML,例如:

document.body.innerHTML = jsonStr;

当然,您可能希望body通过其他元素替换getElementById.

至于问题的CSS部分,您可以使用RegExp在将字符串化对象放入DOM之前对其进行操作.例如,此代码(在JSFiddle上也用于演示目的)应该处理花括号的缩进.

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 '<div style="text-indent: ' + (f['brace'] * 20) + 'px;">' + p1 + '</div>';
    },
    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' 的空格参数的行为).但是你可以将它作为不同类型格式的基础.

Answer 2

请注意,您提供的链接不是HTML页面,而是JSON文档.格式化由浏览器完成.

您必须决定是否:

1. 您希望显示原始JSON(不是HTML页面),如示例中所示
2. 显示格式化JSON的HTML页面

如果你想要1.,只需告诉你的应用程序使用JSON呈现一个响应体,设置MIME类型(application/json)等.在这种情况下,格式化由浏览器(和/或浏览器插件)处理

如果是2.,则需要使用JSON呈现一个简单的最小HTML页面,您可以通过以下几种方式突出显示它:

• 服务器端,取决于您的堆栈.几乎每种语言都有解决方案
• 客户端使用Javascript突出显示库.

如果您提供有关堆栈的更多详细信息,则可以更轻松地提供示例或资源.

编辑:对于客户端JS突出显示,您可以尝试higlight.js,例如.