如何在HTML页面上显示原始JSON数据[重复]

这个问题在这里已经有答案了

八年前关闭的

可能重复:
使用JavaScript打印JSON

我希望在HTML页面上显示我的原始JSON数据,就像JSONview一样。例如,我的原始json数据是:

{
“嘿”:“伙计”,
“成员”:243,
“对象”:{
“哇”:“坚果”,
“混乱”:[
1.
2.
“thr<h1>ee”
],
“更多”:“东西”
},
“真棒”:没错,
"假":假,,
“含义”:空,
“日语”:明日がある。",
“链接”:http://jsonview.com",
“notLink”:http://jsonview.com “太好了”
}

它来自http://jsonview.com/,我想要达到的是http://jsonview.com/example.json 如果您使用Chrome并安装了JSONView插件

我尝试过,但未能理解它是如何工作的。我想使用JS脚本(CSS突出显示)来自定义由ajax检索的原始JSON数据的格式,并最终将其放在HTML页面上的任何位置,如div元素中。是否有任何现有的JS库可以实现这一点?或者如何实现

我认为在HTML页面上显示数据所需要的就是JSON.stringify

例如,如果您的JSON存储方式如下:

var jsonVar={
文本:“示例”,
编号:1
};

然后,只需执行以下操作即可将其转换为字符串:

var jsonStr=JSON.stringify(jsonVar);

然后可以直接插入HTML,例如:

document.body.innerHTML=jsonStr;

当然,您可能希望通过getElementById用其他元素替换body

至于问题的CSS部分,您可以在将字符串化对象放入DOM之前使用RegExp来操作它

var jsonVar={
文本:“示例”,
编号:1,
obj:{
“更多文本”:“另一个示例”
},
obj2:{
“更多文本”:“又一个例子”
}
},//原始对象
jsonStr=JSON.stringify(jsonVar),//对象字符串化
regeStr='',//最终保存格式化字符串化对象的空字符串
f={
括号:0
};//用于跟踪增量/减量的对象,
//特别是大括号(可以添加其他属性)
regeStr=jsonStr.replace(/({124;}[,]*.[^{}:+:[^{}:,]*[,{]*)/g,函数(m,p1){
var rtnFn=函数(){
返回“<div style=“文本缩进:”+(f['brace']*20)+'px;”>“+p1+”</div>
},
rtnStr=0;
if(p1.lastIndexOf('{')==(p1.length-1)){
rtnStr=rtnFn();
f['brace']+=1;
}else if(p1.indexOf('}')==0){
f['brace']-=1;
rtnStr=rtnFn();
}否则{
rtnStr=rtnFn();
}
返回rtnStr;
});
document.body.innerHTML+=regeStr;//将结果附加到HTML文档的正文中

这段代码只是在字符串中查找对象的部分,并将它们分成div(尽管您可以更改其中的HTML部分)。但是,每次遇到大括号时,它都会根据是左大括号还是右大括号来增加或减少缩进(行为类似于“JSON.stringify”的space参数),但您可以将其作为不同格式的基础

发表评论