jQuery 对 json 的遍历

Question

json 有两种结构：对象和数组

1. json 对象

特点： 形式与 python 字典一样。以 { 开始，以 } 结束 ，内部元素以 key/value形式，key/value 对之间使用 , 逗号分隔。

packJson = {"key1": "value1", "key2": "value2"}

2. json 数组

packJson = [{"key1": "value1", "key2": "value2"}, {"key1": "value1", "key2": "value2"}]

数组是值的有序集合， 以 [ 开始 ] 结束，元素之间使用 , 逗号分隔

3. json 对象和 json 字符串间的转换

在数据传输过程中，json 是以文本（字符串的形式）传递的，而 jQuery 操作的是 json 对象。 因此，json 对象和 json 字符串的相互转换是关键的。

• json 字符串

var jsonStr = '{"key1": "value1", "key2": "value2"}';

• json 对象

var jsonObj = {"key1": "value1", "key2": "value2"};

json 字符串转 json 对象

var jsonObj = eval('('+ jsonStr +')');  

json 对象转 json 字符串

var jsonStr = jsonObj.toJSONString();

４．jQuery 遍历 json 对象

4.1 grep

<script type='text/javascript' src="/jquery.js">
</script>
<script type="text/javascript">
	$().ready( function(){
		var array = [1,2,3,4,5,6,7,8,9];
		var filterarray = $.grep(array,function(value){
			return value > 5;//筛选出大于5的
		});
		for(var i=0;i<filterarray.length;i++){
			alert(filterarray[i]);
		}
		for(key in filterarray){
			alert(filterarray[key]);
		}
	});
</script>

4.2 each

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
	$().ready( function(){
		var anObject = {one:1,two:2,three:3};//对json数组each
		$.each(anObject,function(name,value){
			alert(name);
			alert(value);
		});
		var anArray = ['one','two','three'];
		$.each(anArray,function(n,value){
			alert(n); alert(value);
		});
	});
</script>

4.3 inArray

<script type='text/javascript' src="/jquery.js">
</script>
<script type="text/javascript">
 $().ready(function(){
  var anArray = ['one','two','three'];
  var index = $.inArray('two',anArray);
   alert(index);//返回该值在数组中的键值，返回1
   alert(anArray[index]);//value is two
 });
</script>

4.4 map

<script type='text/javascript' src="/jquery.js">
</script>
<script type="text/javascript">
	$().ready( function(){
		var strings = ['0','1','2','3','4','S','6'];
		var values = $.map(strings,function(value){
			var result = new Number(value);
			return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写
		});
		for(key in values){
			alert(values[key]);
		}
	});
</script>

5.原生 js 遍历 json 对象　　

5.1 无规律

<script>
var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
	for(var key in json[i]){
		alert(key+':'+json[i][key]);
	}
}
</script>

5.2 有规律

packJson = [{"name":"nikita", "password":"1111"}, {"name":"tony", "password":"2222"}];
for(var p in packJson){
	//遍历json数组时，这么写p为索引，0,1
	alert(packJson[p].name + " " + packJson[p].password);
}

或者

for(var i = 0; i < packJson.length; i++){
	alert(packJson[i].name + " " + packJson[i].password);
}

5.3 json 对象　　

myJson = {"name":"caibaojian", "password":"1111"};
for(var p in myJson){
	//遍历json对象的每个key/value对,p为key
	alert(p + " " + myJson[p]);
	reuturn str += myJson[p]+',';
}