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

Question

这个问题在这里已经有了答案:

关闭 9年前.

Possible Duplicate:
JSON pretty print using JavaScript

我想像 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/ ，而我想要实现的就像 http://jsonview.com/example.json如果您使用 Chrome 并已安装 JSONView 插件。

我尝试过，但无法理解它是如何工作的。我想使用 JS 脚本(CSS 突出显示)自定义格式我的原始 JSON 数据，这些数据由 ajax 检索，最后将其放在 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;

当然，您可能希望通过 getElementById 将 body 替换为其他元素。

至于您问题的 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' )。但是您可以将其作为不同类型格式的基础。