<div id="out">输出区域</div>
1. 简单的JSON对象进行遍历
function traverseJsonSimpleObj(){ var jsonObj = {"name": "kevin", "age": 27, "sex": "男", "city": "shenzhen"}; for(var key in jsonObj){ var html = "<p>" html += (key + ' : ' + jsonObj[key]); html += "</p>"; $("#out").append(html); } }
2. 遍历json数组,元素为json对象
function traverseJsonArray(){ var jsonArray = [{"name": "kevin", "age": 27, "sex": "男", "city": "shenzhen"}, {"name": "kevin2", "age": 28, "sex": "男", "city": "beijing"}]; for(var i=0; i<jsonArray.length; i++){ var jsonObj = jsonArray[i]; for(var key in jsonObj){ var html = "<p>" html += (key + ' : ' + jsonObj[key]); html += "</p>"; $("#out").append(html); } $("#out").append("-----------------------------------------------------"); } }
3. 深度遍历复合Json结构数据
JSON对象里面可以嵌套多层对象(数组或对象),嵌套层数未知
function deepTraverse(json){ if(isType(json, "Object")){ for(var key in json){ $("#out").append(key + ' : '); if(isType(json[key], "Array") || isType(json[key], "Object")){ $("#out").append("下面为子项内容<br/>"); } deepTraverse(json[key]); } } else if(isType(json, "Array")){ for(var i=0; i<json.length; i++){ var jsonObj = json[i]; deepTraverse(jsonObj); if(isType(jsonObj, "Object")){ $("#out").append("------------------------<br/>"); } } } else if(isType(json, "String") || isType(json, "Number") || isType(json,"Boolean") || isType(json,"Null")){ $("#out").append(json); $("#out").append("<br/>"); } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
【说明】递归函数中的【步骤一】和【步骤三】形成一个完整的键值映射输出,发生递归的场景为1和2。
/** * 判断类型 * @param obj 判断的变量 * @param type 预期的类型 */ function isType(obj,type){ return Object.prototype.toString.call(obj) ==="[object "+type+"]"; }
4. 测试
(4.1) 测试 isType(obj, type)方法
function testType(){ console.log(isType([],"Array")); console.log(isType(1,"Number")); console.log(isType("","String")); console.log(isType(new Date(),"Date")); console.log(isType(function(){},"Function")); console.log(isType(new RegExp(),"RegExp")); console.log(isType({},"Object")); console.log(isType(true,"Boolean")); console.log(isType(null,"Null")); console.log(isType(undefined,"Undefined")); }
(4.2) 测试 JSON数据的遍历
var json1 = {"options":[{"text":"王家湾","value":null},{"text":"李家湾","value":true},{"text":"邵家湾","value":13}]}; var simpleJson = {"name": "kevin", "age": 27, "sex": "男", "city": "shenzhen"}; var jsonArray = [{"name": "kevin", "age": 27, "sex": "男", "city": "shenzhen"}, {"name": "kevin2", "age": 28, "sex": "男", "city": "beijing"}]; var complexJson = {"中国南方": {"珠三角": [{"城市名": "深圳", "发展年限": 25, "简称": "鹏城"}, {"城市名": "广州", "发展年限": 60, "简称": "羊城"}, {"城市名": "珠江", "发展年限": 40, "简称": "珠城"}] }, "华中地区": {"长三角": [{"城市名": "武汉", "发展年限": 80, "简称": "火炉"}, {"城市名": "宜昌", "发展年限": 79, "简称": "宜家"}, {"城市名": "咢州", "发展年限": 78, "简称": "小咢"}] }}; $(function(){ deepTraverse(simpleJson); $("#out").append("<hr/>"); deepTraverse(jsonArray); $("#out").append("<hr/>"); deepTraverse(complexJson); $("#out").append("<hr/>"); deepTraverse(json1); $("#out").append("<hr/>");});
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。