Jquery, JS遍历JSON数组 - HTML5

yaoliuwei

2013-07-24

怎样使用Jquery，或者是最简单的JS来遍历一个JSON数组。

<!--HTML5 tag-->

<!DOCTYPE html>
<html lang="en">

<head>

    <!--Bring in jquery-->

    <script type="text/javascript" src="../../jquery/jquery-2.0.3.js"></script>

 

   <script type="text/javascript">
            $(document).ready(function(){
                // 使用Jquery
                var dataList1 =   [
                                    {"creator":"JoshWang","count":"91"},
                                    {"creator":"Jack","count":"55"},
                                    {"creator":"Michell","count":"13"},
                                    {"creator":"Mad", "count":"46"},
                                    {"creator":"Dunk", "count":"456"}
                                    ];

                $(dataList1).each(function(){
                    alert(this.creator + " " + this.count);
                   
                });

                // 不使用Jquery
                var dataList2 = {"items":"[{\"creator\":\"Hongda\",\"count\":\"91\"},{\"creator\":\"Lily\",\"count\":\"55\"}]"
                                }

               dataList2 = eval(dataList2.items);
               for (var i = 0; i < dataList2.length; i++) {
                    alert(dataList2[i].creator + " " + dataList2[i].count);
               }

               // 使用纯JS及数组索引
               var json=[{"kl_id":"2","kl_title":"Test date","kl_content":"Test date","kl_type":"1","id":"1"},{"kl_id":"2","kl_title":"Test","kl_content":"Test","kl_type":"1","id":"2"}]
               var str = "";
               for (var one in json) {
                   alert("one:" + one);
                       for (var key in json[one]){
                           alert("key:" + key)
                           str += json[one][key] + ",";
                       }
               }
               alert(str);

            });

       
        </script>

 

</head>

 

 

</html>

当然，对于比较复杂的Json数组，如Json数组中还有数组，那么可以结合如上介绍的方法来使用：

<script type="text/javascript">
            var dataList = null;
            $(document).ready(function(){
                dataList =   [
                             
                              {"name": "nodeServers","count":"661","items":[
                                  {"creator":"JoshWang","count":"91"},
                                  {"creator":"Jack","count":"55"},
                                  {"creator":"Michell","count":"13"},
                                  {"creator":"Mad", "count":"46"},
                                  {"creator":"Dunk", "count":"456"}
                               ]
                              },
                             
                              {"name": "FQDN","count":"661","items":[
                                  {"creator":"WangSheng","count":"191"},
                                  {"creator":"Jack","count":"55"},
                                  {"creator":"Michell","count":"53"},
                                  {"creator":"Mad", "count":"6"},
                                  {"creator":"Jordan", "count":"356"}
                              ]
                              }

                             ];
                $(dataList).each(function(){
                    alert(this.name + " " + this.count);
                    var itemList = null;
                    itemList = eval(this.items);
                    for (var i = 0; i < itemList.length; i++) {
                        alert(itemList[i].creator + " " + itemList[i].count);
                    }
                   
                });
            });

       
        </script>

jquery jquery数组 html5 js