<<上一主题 下一主题>>  首页 >> Java EE Web Develop >> javascript/html/css 讨论交流中心 >> 遍历JSON中的数组数据(属性和值)和输出
发表新主题 回复该帖子
主题：遍历JSON中的数组数据(属性和值)和输出
唧唧
帖子档案  大 小 楼主 遍历JSON中的数组数据(属性和值)和输出   Post by : 2009-07-25 09:57:12.0
  • 幼儿园
  • 幼儿园
  • UID：3
  • 主题：342
  • 帖子：781
  • 加为好友 加为好友    发送短信 发送短信

比如获得的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> 
签名
　★★★★★★★★
　纵里寻她千百度，蓦然回首，那人却在，灯火阑珊处！
　MyBlog ：http://blog.javawind.net
返回页面顶部  

唧唧
大 小 2F Re:遍历JSON中的数组数据(属性和值)和输出   Post by : 2009-07-25 10:01:55.0
  • 幼儿园
  • 幼儿园
  • UID：3
  • 主题：342
  • 帖子：781
  • 加为好友 加为好友    发送短信 发送短信
   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> 
签名
　★★★★★★★★
　纵里寻她千百度，蓦然回首，那人却在，灯火阑珊处！
　MyBlog ：http://blog.javawind.net
返回页面顶部  

CopyRight © 2008-2009 JavaWind.Net Studio All Rights Reserved
Powered By JWind.BBS Vesion 1.0.0 Beta1 Processed in 18 ms,0 (Queries)  Gzip enabled
WAP - 清除Cookies - 联系我们 - JavaWind.Net Studio - Archiver - TOP Valid XHTML 1.0 Transitional Valid CSS! 粤ICP备07511478号