在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> ';
});
$(".title").html("年级优秀学生:" + strHTML_0);
};
function lnk_Click(i){
var objstudent = objData.member[i].students.name;
var strHTML_1 = ""; //初始化保存内容变量
$.each(objstudent,function(index){
strHTML_1 += ' ' + objstudent[index] + ' ';
});
$("#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”形式获取该索引号下,以及年级对应的学生指定的元素将变量内容显示在页面中。