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
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022