jquery 解析json对象为字符串
效果视图
jquery代码
$(function(){
var test={
init:function init(){
this.renderingInfo();//渲染数据信息
},
/**
* 新建数据
*/
newInfo:function newInfo()
{
var info=new Object();//======================总信息对象
var personList=new Array();//==============人员集合
var person=new Object();//==========================人员
var books=new Array();//===============================书本集合
var book=new Object();//书本
book.name='红楼梦';
book.auther='曹雪芹';
book.timer='清代';
books.push(book);//=========================添加书本
book=new Object();//书本
book.name='三国演义';
book.auther='罗贯中';
book.timer='元末明初';
books.push(book);//=========================添加书本
book=new Object();//书本
book.name='西游记';
book.auther='吴承恩';
book.timer='明代';
books.push(book);//=========================添加书本
book=new Object();//书本
book.name='水浒传';
book.auther='施耐庵';
book.timer='元末明初';
books.push(book);//=========================添加书本
person.name='张三';
person.age=20;
person.birtbhday=new Date();
person.books=books;
personList.push(person);//将人员信息加入集合
person=new Object();//==========================人员
books=new Array();//===============================书本集合
book=new Object();//书本
book.name='安徒生童话';
book.auther='安徒生';
book.timer='1835年-1872年';
books.push(book);//=========================添加书本
book=new Object();//书本
book.name='白雪公主';
book.auther='格林兄弟';
book.timer='1812';
books.push(book);//=========================添加书本
book=new Object();//书本
book.name='米老鼠和唐老鸭';
book.auther='沃尔特·迪士尼';
book.timer='1924';
books.push(book);//=========================添加书本
person.name='张三';
person.age=20;
person.birtbhday=new Date();
person.books=books;
personList.push(person);//将人员信息加入集合
info.persons=personList;
info.inabtract='包含人员信息和人员相关书籍信息';
info.attributeinfo='人员→姓名、年龄、生日、【喜欢的书籍信息→【书籍名称、作者、出版日期】】';
return info;
},
/**
* 将参数转为字符串
*/
jsonToText:function jsonToText(index,obj)
{
var html='';
var space='';
for(var k=0;k<index;k++){
space+=' ';
}
var size=0;//同级属性数量
for(var x in obj)
{
size++;
}
var num=1;
for(var x in obj)
{
html+=space;
if($.isArray(obj[x]))//是否为数组集合
{
for(var i in obj[x])
{
if(i==obj[x].length-1)
{
html+=x+' _'+i+':<br>'+space+'{<br>'+space+test.jsonToText(index,obj[x][i])+space+'}<br>'+space;//递归调用
}
else
{
html+=x+' _'+i+':<br>'+space+'{<br>'+space+test.jsonToText(index,obj[x][i])+space+'},<br>'+space;//递归调用
}
}
}
else if($.isPlainObject(obj[x])){//是否为对象
html+=test.jsonToText(index,obj[x]);//递归调用
}
else
{
html+=x+':'+obj[x]+',<br>';
if(num!=size)
html+=space;
}
num++;
}
return html;
},
/**
* 渲染参数信息
*/
renderingInfo:function renderingInfo()
{
var info=test.newInfo();
var html='<strong>字符数据信息:</strong><br>'+JSON.stringify(info)+'<br>';
html+='<br><strong>视图信息:</strong><br>'+test.jsonToText(1,info);
$('.json-text').html(html);
}
};
test.init();
});
html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mall-admin-web</title>
<script src="jquery-1.8.3.js"></script>
<script src="test.js"></script>
</head>
<body>
<div class="json-text"></div>
</body>
</html>
以上代码直接复制使用即可