怎样使用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的$.each()方法,我们也可以使用JavaScript原生的for循环来遍历JSON数组。for循环有三种常见的形式:基本的for循环、for...in循环和for...of循环。 - 基本的for循环 基本的for循环通过指定循环的起始条件...
1. **遍历JSON数组**: 在示例中,我们首先通过`for`循环遍历输入的JSON数组`arr`。这是JavaScript中处理数组的基本方法。`for`循环的语法为: ```javascript for (var i = 0; i ; i++) { // 循环体 } ``` ...
在本文中,我们将探讨如何使用jQuery以及原生JavaScript来遍历JSON数组。首先,我们看看使用jQuery遍历JSON数组的方法。 jQuery提供了`.each()`方法,它用于遍历jQuery对象或数组。在遍历JSON数组时,我们可以将...
3. HTML表格操作:利用jQuery遍历JSON数据,并动态地构建表格行添加到页面的表格中。 4. PHP后端数据处理:创建数组,使用json_encode()函数将数组转换成JSON字符串。 5. 使用$.each()进行数据迭代:$.each()方法...
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) => { ...
### jQuery使用$.each方法遍历JSON数组 #### 1. jQuery $.each方法概述 jQuery中的$.each方法是一个强大的工具,它允许开发者遍历JavaScript数组或对象。它模仿了jQuery中的其他迭代方法,比如$.map、$.grep等,但...
本篇文章将详细介绍如何使用JavaScript和jQuery来简单循环遍历JSON数组。 首先,让我们看一个简单的JSON数组示例: ```javascript var str = '[{"name":"宗2瓜","num":"1","price":"122"},{"name":"宗呱呱","num":...
在给定的标题和描述中,我们关注的是如何使用jQuery的`$.ajax()`方法发送AJAX请求,并通过`$.each()`函数遍历接收到的JSON数组。下面将详细介绍这两个功能及其相关知识点。 首先,`$.ajax()`是jQuery提供的一个异步...
总结来说,jQuery的`each()`函数是处理数组和对象遍历的强大工具,它使得JavaScript中的迭代操作变得简单且易于理解。无论是在处理数组、JSON对象还是DOM元素,`each()`都能够提供高效、灵活的解决方案,极大地提高...
2. **遍历JSON数组**:如果JSON数据是一个数组,同样可以使用`$.each()`,但此时的`content`参数将是数组中的每个元素。例如: ```javascript var arr = [{name: 'John', lang: 'JS'}, {name: 'Jane', lang: '...
接着,文档中提到了“ajax遍历json数组”,这说明我们通常需要通过AJAX(Asynchronous JavaScript and XML)技术与服务器异步交互,然后在回调函数中对返回的JSON数据进行处理。AJAX技术允许我们在不重新加载整个...
在JavaScript和jQuery中,`$.each`函数是一个非常实用的工具,用于遍历数组或对象。这个函数允许我们对集合中的每个元素执行某些操作。在本例中,我们将深入探讨如何使用`$.each`处理JSON数据,特别是从JSON字符串...
在jQuery中,遍历JSON数组的例子如下: ```javascript var arr = [{name: "john", lang: "js"}, {name: "nailwl", lang: "jquery"}, {name: "吴磊", lang: "ext"}]; $.each(arr, function(index, content) { alert...
### jQuery遍历Json数据的方法知识点详解 #### 1. jQuery遍历的必要性与优势 在Web开发中,经常需要处理和展示来自服务器的数据,尤其是在构建动态的网页内容时。JSON(JavaScript Object Notation)数据格式因其...
在`success`回调函数中,我们解析JSON数组并创建新的下拉选项。当用户点击“查看详情”按钮时,可能需要发送另一个AJAX请求获取详细信息,并将其显示在`#contentclass`元素内。 在服务器端,SSH1框架中的控制器...