Home  >  Article  >  Web Front-end  >  How to display JSON data in html

How to display JSON data in html

不言
不言Original
2018-06-05 11:57:462827browse

在项目中我们需要将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">

调用代码:

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

效果: 

相关推荐:

HTML页面点击下载文件的两种实现方法

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn