查看完整版本: [-- 遍历JSON中的数组数据(属性和值)和输出 --]

风信Java论坛 ›› javascript/html/css 讨论交流中心 ›› 遍历JSON中的数组数据(属性和值)和输出 登录 -> 注册

1F 遍历JSON中的数组数据(属性和值)和输出   唧唧 Post by : 2009-07-25 09:57:12.0

比如获得的json是这样：
{"a":"内容1", "b":"内容2", "c":"内容3", "d":"内容4", ......}

html是这样的：
<table>
 <tr><td id="a"></td></tr>
 <tr><td id="b"></td></tr>
 <tr><td id="c"></td></tr>
 <tr><td id="d"></td></tr>
 ....
</table>

   xhtml代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.  <head> 
  4.   <title> new document </title> 
  5.   <meta name="generator" content="editplus" /> 
  6.   <meta name="author" content="www.javawind.net" /> 
  7.   <meta name="keywords" content="" /> 
  8.   <meta name="description" content="" /> 
  9.  </head> 
  10.  
  11.  <body> 
  12.   <table> 
  13.     <tr><td id="a"></td></tr>   
  14.     <tr><td id="b"></td></tr>   
  15.     <tr><td id="c"></td></tr>   
  16.     <tr><td id="d"></td></tr> 
  17.   </table> 
  18.   <script type="text/javascript"> 
  19.   <!--  
  20.     //1.只有一个数组  
  21.     var data='{"a":"内容1","b":"内容2","c":"内容3","d":"内容4"}';  
  22.     var jsonData = eval("("+data+")");  
  23.     for(var key in jsonData){  
  24.        alert(key+':'+jsonData[key]);  
  25.        if(document.getElementById(key)){  
  26.             document.getElementById(key).innerHTML=jsonData[key];  
  27.         }  
  28.     }  
  29.  
  30.     //2.有两个或者以上的数组  
  31.     data='[{"a":"内容1","b":"内容2"},{"aa":"内容3","bb":"内容4"}]';  
  32.     jsonData = eval("("+data+")");  
  33.     for(var i=0;i<jsonData.length;i++){  
  34.         for(var key in jsonData[i]){  
  35.            alert(key+':'+jsonData[i][key]);  
  36.         }  
  37.     }     
  38.   //--> 
  39.   </script> 
  40.  </body> 
  41. </html> 
2F Re:遍历JSON中的数组数据(属性和值)和输出   唧唧 Post by : 2009-07-25 10:01:55.0
   xhtml代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.  <head> 
  4.   <title> new document </title> 
  5.   <meta name="generator" content="editplus" /> 
  6.   <meta name="author" content="" /> 
  7.   <meta name="keywords" content="" /> 
  8.   <meta name="description" content="" /> 
  9.  </head> 
  10.  
  11.  <body> 
  12.   <script type="text/javascript"> 
  13.   <!--  
  14.     var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];  
  15.     //方法一  
  16.     alert("-----------方法一--------------");  
  17.     for(var i=0,l=json.length;i<l;i++){  
  18.         for(var key in json[i]){  
  19.             alert(key+':'+json[i][key]);  
  20.         }  
  21.     }     
  22.       
  23.     //方法二  
  24.     alert("-----------方法二--------------");  
  25.     for(var one in json){  
  26.         for(var key in json[one]){  
  27.             alert(key+':'+json[one][key]);  
  28.         }  
  29.     }  
  30.  
  31.     //方法三  
  32.     alert("-----------方法三--------------");  
  33.     var extend=function(aObject,bObject){  
  34.         for(var prop in aObject){  
  35.             bObject[prop] = aObject[prop];  
  36.         }  
  37.         return bObject;  
  38.     }  
  39.     var result = extend(json[0],json[1]);  
  40.     //After this line the result results '{dd:'SB',AA:'东东',re1:123,cccc:'dd',lk:'1qw'}';  
  41.     for(var key in result){  
  42.         alert(key+':'+result[key]);  
  43.     }  
  44.   //--> 
  45.   </script> 
  46.  </body> 
  47. </html> 

风信Java论坛 ›› javascript/html/css 讨论交流中心 ›› 遍历JSON中的数组数据(属性和值)和输出 登录 -> 注册

查看完整版本: [-- 遍历JSON中的数组数据(属性和值)和输出 --]
CopyRight © 2008-2009 JavaWind.Net Studio All Rights Reserved
Powered By JWind.BBS Vesion 1.0.0 Beta1 Processed in 8 ms,0 (Queries)  Gzip enabled
粤ICP备07511478号