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


How to display raw JSON data on a HTML page

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

Possible Duplicate:
JSON pretty print using JavaScript

我想在HTML页面上显示我的原始JSON数据，就像JSONVIEW一样。例如，我的原始JSON数据是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  {
  "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库可以实现这一点？或者怎么做？

相关讨论

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

例如，如果您的JSON是这样存储的：

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

然后只需执行此操作即可将其转换为字符串：

1
var jsonStr = JSON.stringify(jsonVar);

然后可以直接插入HTML，例如：

1
document.body.innerHTML = jsonStr;

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

至于问题的css部分，在将其放入DOM之前，可以使用regexp来操作字符串化对象。例如，此代码(出于演示目的也在jfiddle上)应该注意大括号的缩进。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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页面，而是JSON文档。格式化由浏览器完成。

你必须决定是否：

  • 您希望显示原始JSON(而不是HTML页面)，如您的示例中所示。
  • 显示带格式化JSON的HTML页

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

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

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

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

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

    相关讨论

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

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

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

    相关讨论