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);
});

控制台截图

我们能看到,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循环却可以这么取数据。

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

很清晰的看出,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. 第三方工具 - 关于echarts下钻功能的一些总结.js

    废话:好久没有写博客了,每每看着自己的'战绩'都有点愧疚,但是这段时间确实学习了不少东西,待我慢慢地一 一梳理,将之消化并分享. ---------------------------$O_O$--- ...

  2. Angular和Vue.js 深度对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...

  3. 数据库连接问题之:Caused by: java.sql.SQLException: Connections could not be acquired from the underlying database!

    要么是驱动问题(没加载到工程中去或者其他问题)要么是账号密码或者url或者driver写错 driver:com.mysql.jdbc.Driver url:jdbc:mysql://localhos ...

  4. jq 抽奖转盘

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 纯js生成验证码

    实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  6. 面向对象写的简单的colors rain

      <!DOCTYPE html>   <html>   <head>   <meta charset="UTF-8">   < ...

  7. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  8. 冒泡排序及优化(Java实现)

    向大端冒泡 public class BubbleSort { public static <T extends Comparable<? super T>> void sor ...

  9. AndroidStudio R 文件标红

    一种不常见的问题 AndroidStudio 文件大小会有一定的限制,超过一定大小将无法解析.大型的Android项目容易出现这个问题. 可以按照下面的步骤解决这个问题: 在AndroidStudio ...

  10. Linux远程连接工具

    Linux远程连接可以使用SecureCRT工具完成 SecureCRT下载地址 修改虚拟机中的网络适配器---改为桥接模式 一,配置:在Linux终端上获取IP地址----ifconfig 二,同时 ...