How to display JSON data in html

在项目中我们需要将json数据直接显示在页面上，但是如果直接显示字符串很不方便查看，下面小编给大家带来了html中显示JSON数据的方法，需要的的朋友参考下吧

背景：

有时候我们需要将json数据直接显示在页面上（比如在做一个接口测试的项目，需要将接口返回的结果直接展示），但是如果直接显示字符串，不方便查看。需要格式化一下。

解决方案：

其实JSON.stringify本身就可以将JSON格式化，具体的用法是：

JSON.stringify(res, null, 2); //res是要JSON化的对象，2是spacing

如果想要效果更好看，还要加上格式化的代码和样式：

js代码:

function syntaxHighlight(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, &#39;&&#39;).replace(/</g, &#39;<&#39;).replace(/>/g, &#39;>&#39;);
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
        var cls = &#39;number&#39;;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = &#39;key&#39;;
            } else {
                cls = &#39;string&#39;;
            }
        } else if (/true|false/.test(match)) {
            cls = &#39;boolean&#39;;
        } else if (/null/.test(match)) {
            cls = &#39;null&#39;;
        }
        return &#39;<span class="&#39; + cls + &#39;">&#39; + match + &#39;</span>&#39;;
    });
}

样式代码:

<style>
    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }
</style>

html代码:

<pre id="result">

调用代码:

$('#result').html(syntaxHighlight(res));

效果: 

【相关推荐】

1. HTML免费视频教程

2. html实现消息按钮上的数量角标的实例详解

3. Html完成异步上传文件的Jquery代码实例

4. 对HTTP Headers知识点的图文说明

5. Html5 datalist标签详解以及与后台数据的动态匹配

The above is the detailed content of How to display JSON data in html. For more information, please follow other related articles on the PHP Chinese website!