How to display JSON data in html-HTML Tutorial-php.cn

How to display JSON data in html

黄舟

Release： 2017-05-22 10:11:50

Original

1995 people have browsed it

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

背景：

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

解决方案：

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

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

Copy after login

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

js代码:

function syntaxHighlight(json) {
    if (typeof json != &#39;string&#39;) {
        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;;
    });
}

Copy after login

样式代码:

<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>

Copy after login

html代码:

<pre id="result">

Copy after login

调用代码:

$(&#39;#result&#39;).html(syntaxHighlight(res));

Copy after login

效果:

【相关推荐】

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!