jQuery遍历JSON数据（jQuery调用JSON数据学习第三天）

       在JSON格式数据中，通常使用“name/value”形式来展示一些简单的数据，而对于复杂的JavaScript对象，则往往需要借助数组的形式，而JSON中的数组是针对“value”值而言的，如果以数组的形式表示“value”值，那么将以左中括号“[”开始，以右中括号“]”结束，括号中间可以一条或多条JSON数据，各数据之间用逗号隔开；另外，“value”值的类型包括字符型，数值型，逻辑型，对象或数组，并支持各类型值的嵌套形式。

       由于JSON数据中的“value”值是以数组的形式展示的，因此，在取值时，只需要遍历整个JSON数据，以“变量名.名称”的形式逐层读取即可。接下来通过一个简单的示例来演示在jQuery框架中遍历一个JSON数据的过程。

 

（1）功能描述

         在页面的导航栏中，显示全部优秀学生所在的班级，单击班级链接后，在内容区中显示所选班级对应的学生信息。

（2）实现代码(具体功能代码)

<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
    body{font-size:13px;}
    .iframe {width:260px;border:solid 1px #666;}
    .iframe .title{padding:5px;background-color:#eee;}
    .iframe .content{padding:8px;font-size:12px;}
    .btn {border:#666 1px solid;padding:2px;width:80px;
    filter:progid:DXImageTransform.Microsoft
    .Gradient(GradientType=0,StartColorStr=#ffffff,
    EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
    var objData = {
        member:[{
            grade:"一年级",
            students:{
                name:["刘小芳","李大明"]
            }
           }，{
           grade:"二年级",
            students:{
                name:["陈优","王小海","朱红"]
            }
           }，{
           grade:"三年级",
            students:{
                name:["张妍","彩霞"]
           }
          }]
    };
    function add_Grade(){
        var objmember = objData.member;
        var strHTML_0 = "";    //初始化保存内容变量
        $.each(objmember,function(index){
            strHTML_0 += '<a href="javascript:"
            onclick="lnk_Click('+index+')">'
            + objmember[index].grade + '</a>&nbsp;&nbsp;';
        });
        $(".title").html("年级优秀学生：" + strHTML_0);
    };
    function lnk_Click(i){
        var objstudent = objData.member[i].students.name;
        var strHTML_1 = "";  //初始化保存内容变量
        $.each(objstudent,function(index){
            strHTML_1 += '&nbsp;' + objstudent[index] + '&nbsp;';
        });
        $("#Tip").html(strHTML_1);
    };
    $(function() {
        add_Grade();
        lnk_Click(0)
    });
</script>


<div class="iframe">
    <div class="title"></div>
    <div class="content">
         <div id="Tip"></div>
    </div>
</div>

（3）代码解析

       在示例的JSON格式数据中，由于“member”名称对应的“value”值是一个数组，为了获取包含在数组名年级名称对应的值，编写一个自定义函数add_Grade()。在该函数中，先遍历“objData.member”数据，在遍历过程中通过“objData.member[index].grade”的形式获取各对应年级的名称，其中“index”为数组的索引号，该值从0开始。如“objData.member[0].grade”表示获取第一个年级“grade”名称对应的值，即“一年级”。最后，将获取的全部年级值以累加的方式保存在变量“strHTML_0”中，通过指定的元素显示在页面中。

       用户单击“年级”时，为了实现显示对应学生数据的功能，编写另外一个自定义函数lnk_Click(i)。调用该函数时，需要传递一个年级对应的索引号值，在函数中根据传回的索引号值，以“objData.member[i].students.name”形式获取该索引号下，以及年级对应的学生指定的元素将变量内容显示在页面中。