dot.js处理嵌套结构的json数组

dot.js处理嵌套结构的json数组

要处理的json串如下:

这个数组包含了两个以orderid开头的json对象,同时orderid对象中包含了一个或多个goodsInfo数组

[{
	"orderid": "t001_2019-12-31-08-46-11",
	"userid": "t001",
	"userName": "殷x伟",
	"userAddress": "xxxxx市",
	"userPhone": "172xxxx3658",
	"goodsInfo": [{
		"goodsimg": "images/goodsImg/x002.jpg",
		"goodscolor": "蓝色",
		"goodsprice": "399",
		"goodsid": "x002",
		"goodssum": "1596",
		"goodsname": "宴会高跟鞋",
		"goodssize": "S",
		"goodsnum": "4"
	}],
	"orderPrice": "1596",
	"orderStatus": "未支付"
}, {
	"orderid": "t001_2019-12-31-08-45-24",
	"userid": "t001",
	"userName": "殷x伟",
	"userAddress": "xxxxx市",
	"userPhone": "172xxxx3658",
	"goodsInfo": [{
		"goodsimg": "images/goodsImg/b006.jpg",
		"goodscolor": "蓝色",
		"goodsprice": "499",
		"goodsid": "b006",
		"goodssum": "8483",
		"goodsname": "超迷你链条单肩包",
		"goodssize": "S",
		"goodsnum": "17"
	}, {
		"goodsimg": "images/goodsImg/x005.jpg",
		"goodscolor": "红色",
		"goodsprice": "1099",
		"goodsid": "x005",
		"goodssum": "4396",
		"goodsname": "高跟鞋",
		"goodssize": "M",
		"goodsnum": "4"
	}, {
		"goodsimg": "images/goodsImg/y006.jpg",
		"goodscolor": "黑色",
		"goodsprice": "13999",
		"goodsid": "y006",
		"goodssum": "41997",
		"goodsname": "时尚女子大衣",
		"goodssize": "XL",
		"goodsnum": "3"
	}],
	"orderPrice": "54876",
	"orderStatus": "已收货"
}]

dot模板如下:

<!-- 订单商品信息卡片模板 --> 
<script type="text/x-dot-template" id="orderCard">
	{{ for(var i=0; i<it.length;i++ ) { }}   //先循环出orderid对象
	<tr><td>
	<div class="oinfo">
			<div> 
			<div>订单号:{{=it[i].orderid}}
			收货人:{{=it[i].userName}}
			收货地址:{{=it[i].userAddress}}
			收货电话:{{=it[i].userPhone}}
			订单状态:<span id="orderstu" style="color: red;font-weight: bolder;">{{=it[i].orderStatus}}</span>
			</div>  
            <div class="row1">
              <div class="col-md-2 car-menu">商品ID</div>
              <div class="col-md-2 car-menu">商品名称</div>
              <div class="col-md-2 car-menu">商品参数</div>
              <div class="col-md-2 car-menu">单价</div>
              <div class="col-md-2 car-menu">数量</div>
              <div class="col-md-2 car-menu">总价</div>
            </div>
            <!-- 商品列表 -->
            <div id="ordergoods">
			{{ for(var j=0;j < it[i]['goodsInfo'].length;j++) { }}   //对orderid对象中的goodsInfo进行循环输出
              <div class="panel goodsitem">
                <div class="col-md-2">{{=it[i]['goodsInfo'][j].goodsid}}</div>
                <div class="col-md-2"> 
				<img class="goods-image" src="{{=it[i]['goodsInfo'][j].goodsimg}}" style="width: 100px; height: 100px;"> 
				<span id="goods-name">{{=it[i]['goodsInfo'][j].goodsname}}</span> 
				</div>
                <div class="col-md-2 goods-params">{{=it[i]['goodsInfo'][j].goodscolor}}&nbsp;&nbsp;&nbsp;&nbsp;{{=it[i]['goodsInfo'][j].goodssize}}</div>
                <div class="col-md-2 goods-price">¥{{=it[i]['goodsInfo'][j].goodsprice}}</div>
                <div class="col-md-2">{{=it[i]['goodsInfo'][j].goodsnum}}</div>
                <div class="col-md-2 goods-price">¥{{=it[i]['goodsInfo'][j].goodssum}}</div>
              </div>
			 {{ } }}
			 <div style="float: ">
            	<button type="button" class="btn btn-warning" value="{{=it[i].orderid}}" onclick="location='checkmyorder.jsp?orderid={{=it[i].orderid}}'">去完善信息并支付</button>
          	</div>
            </div>
			</div>
	</div>
	</td></tr>
	{{ } }}
</script>
发布了6 篇原创文章 · 获赞 0 · 访问量 163

猜你喜欢

转载自blog.csdn.net/qq_41912398/article/details/103899869
今日推荐