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

首先后台返回数据格式形如下面：

var jsonData = '{↵↵ "reason": "成功",↵↵ "result": {↵↵ "realname": "董**",/*真实姓名*/↵↵ "idcard": "330329199******12",/*身份z号码*/↵↵ "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对象，如果再根据json对象数据在html页面展示。如：

var josn=[{'name':'z','age':18},{'name':'li','age':19}]//json对象

//我这里josn对象是数组，可以遍历，用table去显示

var html='<table id="tab"><tr><td>姓名</td><td>年龄</td></tr>'//html字符串

for(var i=0i<json.lengthi++){

    var obj=json[i]

    html+='<tr><td>'+obj.name+'</td><td>'+obj.age+'</td></tr>'//拼接html字符串

}

html+='</table>'//table结尾

$(document.body)append(html)//利用jQuery把table追加在body标签的最后

问题1：js访问本地json

如果可以这样随意访问，你打开的任何网站不就可以通过js把你本地文件全部获取到了吗，这是非常危险的；这个不是技术上的能不能，而是安全策略问题，解决方法肯定有，大概是给浏览器某种授权。

我比较推荐换一种方式来解决这个问题，你要的结果是访问json文件，如果json文件不是很大的话，何不直接用个js变量保存它的值；

另外可以考虑部署到服务器，通过ajax请求获取，通过jquery可以如下写：

$.get('/content/test.json', function(data) {

  alert(data)})

问题2：如何在前端显示

js *** 纵DOM，可以简单粗暴地加到body里，当然有更好展现方式，推荐单独写个div：

$('body').append(data)

---