Question

可能重复：
JSON pretty print using JavaScript

我想在HTML页面上显示我的原始JSON数据，就像JSONview一样。例如，我的原始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之前对其进行操作。例如，此代码（also on JSFiddle for demonstration purposes）应该处理大括号的缩进。

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部分）。然而，每次遇到花括号时，它会根据是左括号还是闭合（类似于the space argument of 'JSON.stringify'的行为）递增或递减缩进。但是你可以将它作为不同类型格式的基础。

Answer 2

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

你必须决定：

您希望显示原始JSON（不是HTML页面），如示例中所示
显示格式为JSON的HTML页面

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

如果是2.，使用JSON渲染一个简单的最小HTML页面，您可以通过多种方式突出显示它：

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

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

编辑：对于客户端JS突出显示，您可以尝试higlight.js。

Answer 3

除<script>标记之外的任何HTML标记中的JSON都只是一个文本。这就像你在HTML页面中添加一个故事一样。

然而，关于格式化，这是另一回事。我想你应该改变问题的标题。

查看this问题。另请参阅this页。

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

3 个答案: