html中JSON格式化输出

本文介绍了一种方法,用于将MongoDB中存储的日志数据以更易读的格式输出到网页上。通过使用JSON.stringify函数配合特定参数,并结合<pre>标签和CSS样式设置,可以有效地提高日志数据的可读性和美观性。

今天做一个API后台管理系统新增了日志模块,我是把操作的数据直接存入mongo数据库的,mongo是存入的json格式但是我想输出存入的操作详情到页面一直是很乱的格式,我想按照mongo的格式输出找了很久找到了解决方法:

JSON.stringify(jsObj, null, "\t"); // 缩进一个tab
JSON.stringify(jsObj, null, 4);    // 缩进4个空格

另外还要在最外层加上<pre>标签

在展示代码的时候,你需要选择究竟是否折行。如果你选择折行,幸运地,你可以使用为<pre>标签提供的独一无二的样式来保留空白同时折行,如同下面这样:

pre {
  white-space: pre-wrap;
}

如果你不想折行,你就不用像上面那样做,不过你得考虑如果一行太长了怎么办。太长的行可能会撑开固定宽度的容器或者超出容器范围。要避免这个,我建议你加上横向滚动条:

pre {
  overflow-x: auto;
}

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值