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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (625)

我想像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"
}

我试过但未能理解它是如何工作的。我想使用JS脚本(CSS突出显示)来自定义格式化由AJAX检索的原始JSON数据,并最终将它放在HTML页面中的任何位置,比如div元素。有没有现成的JS库可以实现这一点?或者如何去做?

提问于
用户回答回答于

你必须决定是否:

  • 你想显示原始的JSON(不是HTML页面),如你的例子
  • 用格式化的JSON显示HTML页面

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

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

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

我认为所有你需要在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。

扫码关注云+社区

领取腾讯云代金券