Jquery, JS遍历JSON数组 - HTML5

最新推荐文章于 2023-11-02 09:48:14 发布
最新推荐文章于 2023-11-02 09:48:14 发布
阅读量239 收藏 1
点赞数
分类专栏： JQuery JSON 文章标签： Jquery Js JSON数组 ViewUI
JQuery 同时被 2 个专栏收录
32 篇文章 2 订阅
订阅专栏
JSON
5 篇文章 0 订阅
订阅专栏

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

 

iteye_4921
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 遍历json数组的实现代码
12-09
代码如下: [removed] var d1 =[{“text”:”王家湾”,”value”:”9″},{“text”:”李家湾”,”value”:... [removed] 不用JQuery 代码如下: [removed] var json = {“options”:”[{\”text\”:\”王家湾\”,\”value
JQuery遍历json数组的3种方法
12-02
 //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作详细介绍服务器端回调的数据问题，我们...
JS循环遍历JSON数据的方法
04-11 3088
本文提供了 JS 循环 JSON 数据列，以及 JS 循环遍历 JSON 数据的例子，供大家学习参考。
js递归遍历json对象,js循环遍历json数组
wenangou的博客
09-15 4457
Json对象：varsmsTypeDesc={"4":"回访短信","3":"邮件短信","aa":"测试短信"};
js 对象，json数组遍历
m0_71491195的博客
08-05 1924
js 对象，json数组遍历。
JS遍历JSON
最新发布
qq_45782349的博客
11-02 234
【代码】JS遍历JSON。
js遍历数组 循环json数组 多种方法
qq_41046717的博客
07-17 1万+
JS数组的遍历方法有两种： 一：一般的for循环，例如： 1 2 3 4 var a = new Array("first", "second", "third") for(var i = 0;i &lt; a.length; i++) { document.write(a[i]+","); } 输出的结...
JS简单循环遍历json数组的方法
11-23
本文实例讲述了JS简单循环遍历json数组的方法。分享给大家供大家参考，具体如下： 例如数据库里面的json字符串是这样的 var str = '[{"name":"宗2瓜","num":"1","price":"122"},{"name":"宗呱呱","num":"1","price...
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
12-12
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) => { ...
JSONArray遍历
我的博客
09-15 2万+
JSONArray遍历
js遍历json数组
热门推荐
cgd_8523的博客
08-28 2万+
var jsonstr= [{src:"a",name:"应用"},{src:"b",name:"功能"},{src:"c",name:"信息"}]; //json数组 alert(jsonstr[i].name);//json字符串,alert弹出：应用 var jsonobj = eval(data); alert(jsonobj[i].name);//jso
js遍历数组 循环json数组
流响出疏桐
10-13 2万+
JS数组的遍历方法有两种： 一：一般的for循环，例如： 1 2 3 4 var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出...
json对象数组的创建、遍历、添加、删除、修改、js的splice()用法
zhipengit
02-25 2063
json对象操作目录创建遍历：共四种方法1. $.each2. forEach3. for in4. for添加：共三种方法1. 在json对象数组的末尾添加一个json对象2. 在json对象数组的最前面添加一个json对象3. 用splice方法在json数组的任意位置插入json对象4. 添加属性：$.each删除：共两种方法1. 用delete删除2. 用splice删除修改:两种方法1. 修改数组中某一个json对象的属性的值2. 用splice方法直接替换掉一个json对象ps:js的splic
JSON数据遍历之for-in
04-09 1109
object 本身就是无对象的集合，因此在用 for-in 语句遍历对象的属性时，遍历出的属性顺序与对象定义时不同。
JS使用递归遍历json对象进行操作
qq_53485256的博客
09-27 4906
平时做项目时，我们经常会遇到需要遍历json对象的情况，如果是知道层级的话还好搞一点，如果层级是没办法固定的话就不能用一般的遍历方法了，然后我今天使用到了递归，考虑到以后也可能会经常用到所以记录一下，使用后感觉用好了的话对各种动态操作还是很有帮助的；
直接在JS里创建JSON数据然后遍历使用
04-10 618
1. json对象" name5" : '闲置期',"name1" : '播种期',"name2" : '苗期',"name3" : '生长期',"name4" : '采收期'结果为：Object:Object;2. json字符串var s1="{";var s2 = " 'name5' : '闲置期', 'name1' : '播种期','name2' : '苗期','name3' : '生长期','name4' : '采收期'";var s3="}";
JavaScript中的数组、伪数组、json的遍历及概念
weixin_45113182的博客
01-13 400
JavaScript中的数组、伪数组、json的遍历及概念
JSONArray遍历处理
qq_33240556的博客
11-06 7712
json
jquery获取javajson数组
05-18
如果你有一个 JSON 数组，可以使用 jQuery 的 `$.getJSON()` 方法来获取它。假设你的 JSON 数组如下所示： ```json [ {"name": "John", "age": 30}, {"name": "Jane", "age": 25}, {"name": "Bob", "age": 40} ] ``` 那么你可以使用以下代码来获取它： ```javascript $.getJSON('your_url_here', function(data) { $.each(data, function(index, item) { console.log(item.name + ' is ' + item.age + ' years old.'); }); }); ``` 在这个示例中，我们使用了 `$.getJSON()` 方法来获取 JSON 数据，并使用 `$.each()` 方法来遍历数组中的每一个对象。对于每个对象，我们打印出了它的名称和年龄。你需要将 `your_url_here` 替换为你的 JSON 数组的 URL 地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值