json数据遍历详解

json数据获取方式:

1. json对象.键名
2. json对象[“键名”]
3. 数组对象[索引]

json数据普通遍历:

var person = {"name": "张三", age: 23, 'gender': true};

var ps = [{"name": "张三", "age": 23, "gender": true},
		 {"name": "李四", "age": 24, "gender": true},
		 {"name": "王五", "age": 25, "gender": false}];

    	//获取person对象中所有的键和值
    	
    	//for in 循环
    	for(var key in person){
    	
    		//这样的方式获取不行。因为相当于  person."name"
    		//alert(key + ":" + person.key);
    		//这里的key是person里面的键
    		alert(key+":"+person[key]);
    	}
    	 
    	//获取ps中的所有值
    	for (var i = 0; i < ps.length; i++) {
    		var p = ps[i];
    		for(var key in p){
    			alert(key+":"+p[key]);
    		}
    	}
    	
    	//fori也可以用for in替换
    	for(var index in ps){	//由于ps是数组类型, 所以这里的index变量是索引
    		for(var key in ps[index]){		//由于ps[index]是jason字符串, 所以这里的key变量是jason中的key.
    			alert(key+"--"+ps[index][key]);
    	    }
    	}

Json数据JQuery遍历

我们还可以通过JQ的$.each来遍历: $(data).each(function(index,obj)),或者$.each(data, function(index, obj) { }).
但是值得注意的是, data需要是servlet传进来的js对象, 如果是json字符串, 则需要通过JSON.parse(data)或jQuery 的 $.parseJSON(data)转换;

下拉列表动态显示

1. jsp通过ajax获取数据库中province, servlet返回json数据;
2. jsp遍历json, 将id和province放进新的option中, 添加到select里面;

var province = [{id: 1, province: "广东"}, 
				{id: 2, province: "广西"}, 
				{id: 3, province: "湖北"}, 
				{id: 4, province: "湖南"}]

			$("#test").click(function () {
                $.get("provinceServlet", {}, function (data) {
                    var province = $("#province");
                    //格式1
                    /*$(data).each(function () {
                    //这里的this是data中的第一个json对象, 和格式2中的obj对象等同.
                        var option = "<option id="+this.id+">"+this.province+"</option>";
                        province.append(option);
                    });*/
                    //格式2
                    $.each(data,function (index,obj) {
                        var option = "<option id="+obj.id+">"+obj.province+"</option>";
                        province.append(option);
                    })
                })
            })