JavaScript二维数组的遍历_jQuery dom循环创建例子
2016-11-11 13:35:59  By: dwtedx

最近在写关于购物车的本地存储的前端技术、这里是关于如何把一个二维数组内部的信息呈现在页面上、一般来说本地存储时、存储的是关于店铺的信息和店铺内部商品的信息.本地存储时把数组转换成Json串存储的、这里为了方便是直接创建的一个二维数组

var product = [
  {
    "shopId": 100,
    "shopNm": "红石榴",
    "productList": [
      {
        "goodsId": 1,
        "goodsNm": "苹果7",
        "goodsNum": "1"
      }
    ]
  },
  {
    "shopId": 101,
    "shopNm": "红苹果",
    "productList": [
      {
        "goodsId": 2,
        "goodsNm": "苹果5",
        "goodsNum": "2"
      },
      {
        "goodsId": 3,
        "goodsNm": "苹果6",
        "goodsNum": "2"
      }
    ]
  },
  {
    "shopId": 101,
    "shopNm": "红苹果",
    "productList": [
      {
        "goodsId": 2,
        "goodsNm": "苹果5",
        "goodsNum": "2"
      },
      {
        "goodsId": 3,
        "goodsNm": "苹果6",
        "goodsNum": "2"
      },
      {
        "goodsId": 2,
        "goodsNm": "华为",
        "goodsNum": "2"
      },
      {
        "goodsId": 2,
        "goodsNm": "小米",
        "goodsNum": "2"
      }
    ]
  }
]


定义了一个商品信息列表、内部不同的商店、不同商品、数组内部是对象、一个对象对应一个店铺、店铺内部有商品信息、若是有不同商品会添加到productList内部、现在关键是循环添加、信息.先在页面内部给商品布局、然后创建

for (var i = 0; i < product.length; i  ) {
    var dom = ´<div class="shop"><div class="shop_top"><div class="shop_name">商店名称:´ product[i].shopNm ´</div></div></div>´;
    $(´body´).append(dom);
    for (var j = 0; j < product[i].productList.length; j  ) {
    var list = ´<div class="shop_center"><div class="goods_name">商品名称:´ product[i].productList[j].goodsNm ´</div><div class="goods_num">商品数量:´ product[i].productList[j].goodsNum ´</div></div>´;
    $(´.shop´).eq(i).append(list); 
    }
}


这个是循环创建的两层for循环、值得提出的是、因为是二维数组、所以这里可以说是添加了两次!第一层循环的时候、先把所有的商店信息添加、然后第二层for循环添加商店内部的商品信息、有人可能要问、为什么不都在第二层循环添加

如果是都在第二个for循环添加的话、那么就是一个商店和一个商品呈现出来、也就是说、同个商店下的商品不会合并在该商店下面

这里用到eq()方法、他的目的是只将对应商品放到对应商店下面、这里只是简单的呈现、最后关于html代码部分是这样的

<div class="shop">
    <div class="shop_top">
        <div class="shop_name">商店名称</div>
    </div>
    <div class="shop_center">
        <div class="goods_name">商品名称</div>
        <div class="goods_num">商品数量</div>
    </div>
</div>


这样就可以把一个二维数组内部的的信息用JQuery来动态添加到页面上、同理、也可以添加三维数组的信息

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+