jquery嵌套遍历json数据

其他 2018-06-05 09:34:30 阅读次数: 1

记一次自己费了好半天用纯js解析服务端json数据的经历，服务器为了封装简历信息，搞了很多list和object，结果交到我这里，看的头皮发麻，js中给大家放入了json数据，格式就是那个样子，下面是源码，仅供学习参考，多多指导。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> new document </title>
    <meta name="generator" content="editplus"/>
    <meta name="author" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.0.3/layer.js"></script>
</head>
<style>
    .text-Box {
        padding: 4px 0px;
        font-size: 15px;
        font-family: '黑体';
    }

    .box {
        border: 2px solid rgb(67, 142, 185, .5);
        padding: 10px 50px 35px 50px;
        border-radius: 20px;
    }

    h5 {
        font-style: italic;
        font-family: '楷体';
        color: rgb(67, 142, 185);
        padding-top: 10px;
    }

    hr {
        margin: 0 auto;
    }
</style>
<body>

<div id="allResume"></div>
<script type="text/javascript">

    var data = [{
        "resume": {
            "id": 2,
            "resumeid": 1,
            "resumename": "默认简历",
            "updatetime": "2018-03-09 15:03:11.0"
        },
        "parray": [{
            "projectname": "巴巴爸爸",
            "resumeid": 1,
            "responsibility": "空军建军节",
            "description": "啊啊啊",
            "endtime": "2018-02-25",
            "starttime": "2018-02-25",
            "projectid": 1
        }],
        "awardstates": "success",
        "edustates": "success",
        "selfstates": "success",
        "skarray": [{
            "skillid": 33,
            "resumeid": 1,
            "skillname": "了",
            "degree": "了"
        }],
        "earray": [{
            "educationid": 1,
            "major": "啊",
            "resumeid": 1,
            "edubg": "啊",
            "university": "啊",
            "endtime": "2018-02-25",
            "starttime": "2018-02-25"
        }],
        "userstates": "success",
        "array": [{
            "awardsid": 34,
            "resumeid": 1,
            "awardsname": "把",
            "awardtime": "2018-02-25"
        }],
        "searray": [{
            "resumeid": 1,
            "selfid": 1,
            "text": "来咯哦哦呢"
        }],
        "prostates": "success",
        "job": {
            "jobExceptation": "软件测试",
            "jobcity": "上海",
            "jobintensionid": 5,
            "jobtime": "2018-02-24",
            "jobtype": "啊",
            "resumeid": 1,
            "salaryExpectation": "啊"
        },
        "user": {
            "address": "的",
            "birthday": "2018-02-23",
            "headurl": "user11521167088600.jpg",
            "id": 2,
            "isshow": 0,
            "nowaddress": "南京",
            "password": "222222",
            "phone": "22222222222",
            "qq": "123456789",
            "sex": "把",
            "status": "11",
            "username": "啦啦123"
        },
        "skillstates": "success"
    }]

    $(function () {
        render(data)
    })

    function render(json) {

        var html = '';
        $.each(json, function (k, v) {
            html = html + '<div class="box">';

            var resume = '';
            var parray = '';
            var skarray = '';
            var earray = '';
            var array = '';
            var searray = '';
            var job = '';
            var user = '';
            // 遍历单条信息
            $.each(json[k], function (k, v) {

                if (k == 'resume') {
                    resume = '<h5>简&emsp;历</h5><hr><div class="row"><div class="text-Box col-lg-4 col-xs-5">简历类型:<label>' +
                        v.resumename + '</label></div><div class="text-Box col-lg-4 col-xs-5">更新时间:<label>' +
                        v.updatetime + '</label></div></div>';
                } else if (k == 'parray') {
                    // 继续遍历list
                    parray = '<h5>项目经历</h5><hr>';
                    $.each(v, function (k, object) {
                        parray = parray + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">项目名称:<label>' +
                            object.projectname + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">项目描述:<label>' +
                            object.description + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">个人职责:<label>' +
                            object.responsibility + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">开始时间:<label>' +
                            object.starttime + '</label></div><div class="text-Box col-lg-4 col-xs-5">结束时间:<label>' +
                            object.endtime + '</label></div></div>';
                    })
                } else if (k == 'skarray') {
                    // 继续遍历list
                    skarray = '<h5>技&emsp;能</h5><hr>';
                    $.each(v, function (k, object) {
                        skarray = skarray + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">技能名称:<label>' +
                            object.skillname + '</label></div><div class="text-Box col-lg-4 col-xs-5">熟练程度:<label>' +
                            object.degree + '</label></div></div>';
                    })
                } else if (k == 'earray') {
                    // 继续遍历list
                    earray = ' <h5>教育背景</h5><hr>';
                    $.each(v, function (k, object) {
                        earray = earray + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">学校名称:<label>' +
                            object.university + '</label></div><div class="text-Box col-lg-4 col-xs-5">专&emsp;业:<label>' +
                            object.major + '</label></div><div class="text-Box col-lg-4 col-xs-5">开始时间:<label>' +
                            object.starttime + '</label></div><div class="text-Box col-lg-4 col-xs-5">毕业时间:<label>' +
                            object.endtime + '</label></div></div>';
                    })
                } else if (k == 'array') {
                    // 继续遍历list
                    array = '<h5>获得奖项</h5><hr>';
                    $.each(v, function (k, object) {
                        array = array + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">获奖名称:<label>' +
                            object.awardsname + '</label></div><div class="text-Box col-lg-4 col-xs-5">获奖时间:<label>' +
                            object.awardtime + '</label></div></div>';
                    })
                } else if (k == 'searray') {
                    // 继续遍历list
                    searray = '<h5>个人评价</h5><hr>';
                    $.each(v, function (k, object) {
                        searray = searray + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">个人评价:<label>' +
                            object.text + '</label></div></div>';
                    })
                } else if (k == 'job') {
                    job = '<h5>期望实习</h5><hr><div class="row"><div class="text-Box col-lg-4 col-xs-5">期待工作:<label>' +
                        v.jobExceptation + '</label></div><div class="text-Box col-lg-4 col-xs-5">工作时间:<label>' +
                        v.jobtime + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">工作城市:<label>' +
                        v.jobcity + '</label></div><div class="text-Box col-lg-4 col-xs-5">期待薪资:<label>' +
                        v.salaryExpectation + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">工作类型:<label>' +
                        v.jobtype + '</label></div></div>';
                } else if (k == 'user') {
                    user = '<h5>个人信息</h5><hr><div class="row"><div class="text-Box col-lg-4 col-xs-5">姓名:<label>' +
                        v.username + '</label></div><div class="text-Box col-lg-4 col-xs-5">生日:<label>' +
                        v.birthday + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">性别:<label>' +
                        v.sex + '</label></div><div class="text-Box col-lg-4 col-xs-5">家庭住址:<label>' +
                        v.address + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">现居地:<label>' +
                        v.nowaddress + '</label></div><div class="text-Box col-lg-4 col-xs-5">QQ:<label>' +
                        v.qq + '</label></div></div>';
                }

            })

            html = html + resume + job + earray + array + skarray + parray + searray + '</div><div class="space-4"></div>';

        })
        layer.msg("数据加载完毕。");

        $("#allResume").append(html);

    }

</script>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_37604508/article/details/79591614
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022