前端页面显示带格式的json数据

Posted 2023-04-20

参考技术A 首先后台返回数据格式形如下面：

var jsonData = '↵↵ "reason": "成功",↵↵ "result": ↵↵ "realname": "董**",/*真实姓名*/↵↵ "idcard": "330329199******12",/*身份证号码*/↵↵ "res": 1 /*1：匹配 2：不匹配*/↵↵ ,↵↵ "error_code": 0↵↵ ';

然后JS处理如下：

jsonData = jsonData .replace(/↵/g,"").replace(/ /g," ");

或者下面这种

jsonData = jsonData .replace(/\n/g,"").replace(/ /g," ");

页面上如果是框架的话 使用v-html 或者ng-html等，否则使用<pre></pre>也可以。

页面中 json 格式显示 数据

在页面中，有时候我们需要的不仅仅是将数据显示出来，而且要以以 json 的格式显示数据，如显示接口的时候

我们需要如下显示

这个时候，主要用到了 <pre> 标签

 

   $.get("/chat", {
                        "query": send_content,
                        "ident": ident
                    },
                    function (data) {

                        var result = JSON.stringify(JSON.parse(data), null, 4);
                        // 格式化输出json
        
                        var left_li = "<li class=\'mar-btm\'></li>";

                        var div_msgl = "<div class=\'media-body pad-hor\'><pre class=\'speech\'>" + result + "</pre></div>";
                        //使用pre 标签


                        $("ul").append(left_li);
                        $("li:last").append(div_msgl);
                    }, "json");
            }