二维数组的遍历和dom循环创建

发的第一篇博客，新手一枚，有错误的，勿喷。

最近在写关于购物车的本地存储的前端技术，这里是关于如何把一个二维数组内部的信息呈现在页面上。

一般来说本地存储时，存储的是关于店铺的信息和店铺内部商品的信息.本地存储时把数组转换成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来动态添加到页面上，同理，也可以添加三维数组的信息。