jquery 解析json为字符串

最新推荐文章于 2024-04-02 12:35:41 发布

TorZhu

最新推荐文章于 2024-04-02 12:35:41 发布

阅读量154

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/u010636072/article/details/99018517

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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+='&nbsp;&nbsp;';
      }
      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+'&nbsp;_'+i+':<br>'+space+'{<br>'+space+test.jsonToText(index,obj[x][i])+space+'}<br>'+space;//递归调用
            }
            else
            {
              html+=x+'&nbsp;_'+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>

以上代码直接复制使用即可

TorZhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery 解析json为字符串

jquery 解析json对象为字符串效果视图jquery代码$(function(){ var test={ init:function init(){ this.renderingInfo();//渲染数据信息 }, /** * 新建数据 */ newInfo:function newInfo() { ...
复制链接

扫一扫