26

可能重复：
使用 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 突出显示）来自定义格式我的原始 JSON 数据，这些数据由 ajax 检索，最后将其放在 HTML 页面上的任何位置，如 div 元素。是否有任何现有的 JS 库可以实现这一点？或者怎么做？

4

3 回答 3

38

我认为在 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'的空格参数）。但是您可以将其作为不同类型格式的基础。

于 2013-01-07T14:33:20.807 回答
8

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

您必须决定是否：

  1. 您想显示原始 JSON（不是 HTML 页面），如您的示例中所示
  2. 显示带有格式化 JSON 的 HTML 页面

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

如果是 2.，则需要使用 JSON 呈现一个简单的最小 HTML 页面，您可以在其中以多种方式突出显示它：

  • 服务器端，取决于您的堆栈。几乎每种语言都有解决方案
  • 带有 Javascript 高亮库的客户端。

如果您提供有关堆栈的更多详细信息，则提供示例或资源会更容易。

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

于 2013-01-07T12:08:51.600 回答
0

除 tag 之外的任何 HTML 标记中<script>的 JSON 都只是文本。因此，就像您在 HTML 页面中添加故事一样。

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

看看这个问题。另请参阅此页面。

于 2013-01-07T12:12:06.890 回答