Two-dimensional array traversal and dom loop creation, two-dimensional array dom Loop

Two-dimensional array traversal and dom loop creation, two-dimensional array dom Loop

This is the first blog I posted. I am a newbie. If it is incorrect, do not try it.

Recently, I am writing a front-end technology about local storage of a shopping cart. Here we are about how to present the information inside a two-dimensional array on the page.

In general, local storage stores store information about stores and products in stores. In local storage, the array is converted to Json string storage. A two-dimensional array is directly created for convenience.

Var product = [{shopId: 100, shopNm: 'hongpomegranate ', productList: [{goodsId: 1, goodsNm: "apple 7", goodsNum: "1"}]}, {shopId: 101, shopNm: 'Red apple', productList: [{goodsId: 2, goodsNm: "apple 5", goodsNum: "2" },{ goodsId: 3, goodsNm: "Apple 6", goodsNum: "2"}]}, {shopId: 101, shopNm: 'Red apple', productList: [{goodsId: 2, goodsNm: "apple 5 ", goodsNum: "2" },{ goodsId: 3, goodsNm: "apple 6", goodsNum: "2" },{ goodsId: 2, goodsNm: "Huawei", goodsNum: "2" },{ goodsId: 2, goodsNm: "Xiaomi", goodsNum: "2"}];

Defines a commodity information list, which contains different stores and commodities. An array is an object. An object corresponds to a shop and there is commodity information in the shop. Different products are added to the productList.

Now, the key is to add the information cyclically. layout the product inside the page first. Then create.

For (var I = 0; I <product. length; I ++ ){
Var dom = '<div class = "shop"> <div class = "shop_top"> <div class = "shop_name"> store name:' + product [I]. shopNm + '</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 name:' + product [I]. productList [j]. goodsNm + '</div> <div class = "goods_num"> item quantity:' + product [I]. productList [j]. goodsNum + '</div> ';
$ ('. Shop'). eq (I). append (list );
}
}

This is a two-layer for loop created by loop. It is worth mentioning that because it is a two-dimensional array, it can be said that it is added twice here! In the first-layer loop, add all the store information first, and then in the second-layer for loop, add the product information in the store. Someone may ask why not add them all in the second-layer loop, if they are added in the second for loop, a store and a product are displayed. That is to say, the products in the same store are not merged under the store.

The eq () method is used here, so that only the corresponding products are placed under the corresponding store.

Here is a simple presentation.

Finally, the html code is as follows:

<Div class = "shop">
<Div class = "shop_top">
<Div class = "shop_name"> store name </div>
</Div>
<Div class = "shop_center">
<Div class = "goods_name"> item name </div>
<Div class = "goods_num"> item quantity </div>
</Div>
</Div>

In this way, the information inside a two-dimensional array can be dynamically added to the page using JQuery. Similarly, the information of a three-dimensional array can also be added.