$.each遍历json数组

时间：2023-03-09 16:43:23
$.each遍历json数组

1.遍历单层json数组

我们把idx和obj都打印出来看看，到底是什么东西

var json1 =[{"id":"1","tagName":"apple"},

    {"id":"2","tagName":"orange"},

    {"id":"3","tagName":"banana"},

    {"id":"4","tagName":"watermelon"},

    {"id":"5","tagName":"pineapple"}

];

$.each(json1, function(idx, obj) {

    console.log(idx);

    console.log(obj);

    console.log(obj.tagName);

});

控制台截图

$.each遍历json数组

我们能看到，idx是索引，obj是对象，tagName可以通过obj直接拿到

2.遍历二层（多层）json

var json2 = {"list":[

    {"id":"1","tagName":"apple"},

    {"id":"2","tagName":"orange"},

    {"id":"3","tagName":"banana"},

    {"id":"4","tagName":"watermelon"},

    {"id":"5","tagName":"pineapple"}

],"total":5};

$.each(json2,function(index,element){

    console.log("index:"+index);

    console.log("element:"+element);

    $.each(element,function(name,value){

        console.log("name:"+name);

        console.log("value:"+value);

        console.log("value.tagName:"+value.tagName);

    })

});

在这里我们用多层嵌套来实现，而不能用单层循环，通过element.list[i].tagName,element.list[0].tagName等等，任何尝试都是徒劳的

必须要从Object里面拿，xx.xx格式才是正确，xx.xx.xx或者xx.xx.xx.xx，当然JavaScript的for循环却可以这么取数据。

接下来我们看看打印出来什么东西

$.each遍历json数组

很清晰的看出，index打印出了外层的list和total，即为索引;element打印出list的五个对象，所以无法单层拿出tagName,最后一个element打印出了total的值

name是对象的索引，内层把value循环遍历出来，我们能看到一个对象，总共五个，然后通过这一个对象拿出其tagName的值

3.补充

JavaScript的for遍历二层json

for (var i=0;i<json2.list.length;i++){

        alert(i + json2.list[i].tagName);

}

个人感觉，原生的简洁易懂

随机推荐

  1. [HNOI2015]亚瑟王

    题面在这里 题意 \(n\)张卡按照一定顺序排列,每轮从第\(1\)张开始考虑到最后一张,考虑一张卡时有\(p[i]\)的概率产生\(d[i]\)的贡献,产生贡献时直接退出该轮并在之后的考虑中直接跳过 ...

  2. 【ZJOI2010】网络扩容

    费用流+最大流 先一遍最大流 再所有边扩容,新加节点限制扩容量k # include <bits/stdc++.h> # define IL inline # define RG regi ...

  3. 笔记：基于DCNN的图像语义分割综述

    写在前面:一篇魏云超博士的综述论文,完整题目为<基于DCNN的图像语义分割综述>,在这里选择性摘抄和理解,以加深自己印象,同时达到对近年来图像语义分割历史学习和了解的目的,博古才能通今!感 ...

  4. mysql在win10下的卸载

    转自http://blog.****.net/sxingming/article/details/52601250   本文介绍,在Windows10系统下,如何彻底删除卸载MySQL... 1&gt ...

  5. 如何利用wireshark破解网站密码

    在有进行破解意愿的想法诞生之前,博主得先来给各位泼一盆凉水,本文介绍的方法破解http的轻而易举,而对于https的就算了.因为Wireshark 没有session key ,不能解密SSL数据流. ...

  6. Docker学习——pinpoint部署

    Pinpoint Install pinpoint-server 下载镜像 docker pull yous/pinpoint 查看镜像 docker images 启动容器 docker run - ...

  7. 常见排序算法及Java实现

    先上个总图↓: ①.直接插入排序 插入排序(Insertion Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并 ...

  8. Windows下安装TensorFlow

    最近学习TensorFlow,当然前提是装好框架,网上教程很多都是虚拟搭建或者是conda,从我的经验来讲,Windows目前只支持Python3.5版本安装,Python官网上有说明: 本人由于常用 ...

  9. mui实现切换选项卡

    mui切换选项卡头目对应选项内容是webAPP应用最多的功能 引入mui文件: 引入mui-segmented-control类实现顶部头目: 引入mui-content-padded类加入各选项卡内 ...

  10. webpack使用教程

    webpack使用教程 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是 ...

相关文章