`
Josh_Persistence
  • 浏览: 1649930 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类

Jquery, JS遍历JSON数组 - HTML5

阅读更多

怎样使用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>

 

0
5
分享到:
评论

相关推荐

    JQuery遍历json数组的3种方法

    除了jQuery的$.each()方法,我们也可以使用JavaScript原生的for循环来遍历JSON数组。for循环有三种常见的形式:基本的for循环、for...in循环和for...of循环。 - 基本的for循环 基本的for循环通过指定循环的起始条件...

    js实现json数组分组合并操作示例

    1. **遍历JSON数组**: 在示例中,我们首先通过`for`循环遍历输入的JSON数组`arr`。这是JavaScript中处理数组的基本方法。`for`循环的语法为: ```javascript for (var i = 0; i ; i++) { // 循环体 } ``` ...

    jQuery 遍历json数组的实现代码

    在本文中,我们将探讨如何使用jQuery以及原生JavaScript来遍历JSON数组。首先,我们看看使用jQuery遍历JSON数组的方法。 jQuery提供了`.each()`方法,它用于遍历jQuery对象或数组。在遍历JSON数组时,我们可以将...

    jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

    3. HTML表格操作:利用jQuery遍历JSON数据,并动态地构建表格行添加到页面的表格中。 4. PHP后端数据处理:创建数组,使用json_encode()函数将数组转换成JSON字符串。 5. 使用$.each()进行数据迭代:$.each()方法...

    Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在

    1.jquery grep()筛选遍历数组(可以得到反转的数组) // 1.jquery grep()筛选遍历数组(可以得到反转的数组) var array = [1,5,9,3,12,4,48,98,4,75,2,10,11]; var filterArray = $.grep(array,(currentValue) =&gt; { ...

    jQuery使用$.each遍历json数组的简单实现方法

    ### jQuery使用$.each方法遍历JSON数组 #### 1. jQuery $.each方法概述 jQuery中的$.each方法是一个强大的工具,它允许开发者遍历JavaScript数组或对象。它模仿了jQuery中的其他迭代方法,比如$.map、$.grep等,但...

    JS简单循环遍历json数组的方法

    本篇文章将详细介绍如何使用JavaScript和jQuery来简单循环遍历JSON数组。 首先,让我们看一个简单的JSON数组示例: ```javascript var str = '[{"name":"宗2瓜","num":"1","price":"122"},{"name":"宗呱呱","num":...

    jQuery的ajax和遍历数组json实例代码

    在给定的标题和描述中,我们关注的是如何使用jQuery的`$.ajax()`方法发送AJAX请求,并通过`$.each()`函数遍历接收到的JSON数组。下面将详细介绍这两个功能及其相关知识点。 首先,`$.ajax()`是jQuery提供的一个异步...

    Jquery使用each函数实现遍历及数组处理

    总结来说,jQuery的`each()`函数是处理数组和对象遍历的强大工具,它使得JavaScript中的迭代操作变得简单且易于理解。无论是在处理数组、JSON对象还是DOM元素,`each()`都能够提供高效、灵活的解决方案,极大地提高...

    Jquery遍历json的两种数据结构[参照].pdf

    2. **遍历JSON数组**:如果JSON数据是一个数组,同样可以使用`$.each()`,但此时的`content`参数将是数组中的每个元素。例如: ```javascript var arr = [{name: 'John', lang: 'JS'}, {name: 'Jane', lang: '...

    jQuery遍历json的方法(推荐)

    接着,文档中提到了“ajax遍历json数组”,这说明我们通常需要通过AJAX(Asynchronous JavaScript and XML)技术与服务器异步交互,然后在回调函数中对返回的JSON数据进行处理。AJAX技术允许我们在不重新加载整个...

    JQuery $.each遍历JavaScript数组对象实例

    在JavaScript和jQuery中,`$.each`函数是一个非常实用的工具,用于遍历数组或对象。这个函数允许我们对集合中的每个元素执行某些操作。在本例中,我们将深入探讨如何使用`$.each`处理JSON数据,特别是从JSON字符串...

    Jquery遍历json的两种数据结构.docx

    在jQuery中,遍历JSON数组的例子如下: ```javascript var arr = [{name: "john", lang: "js"}, {name: "nailwl", lang: "jquery"}, {name: "吴磊", lang: "ext"}]; $.each(arr, function(index, content) { alert...

    Jquery遍历Json数据的方法

    ### jQuery遍历Json数据的方法知识点详解 #### 1. jQuery遍历的必要性与优势 在Web开发中,经常需要处理和展示来自服务器的数据,尤其是在构建动态的网页内容时。JSON(JavaScript Object Notation)数据格式因其...

    SSH1,JQuery的ajax返回json二维数组处理过程

    在`success`回调函数中,我们解析JSON数组并创建新的下拉选项。当用户点击“查看详情”按钮时,可能需要发送另一个AJAX请求获取详细信息,并将其显示在`#contentclass`元素内。 在服务器端,SSH1框架中的控制器...

Global site tag (gtag.js) - Google Analytics