JS遍历数组并通过innerHTML 显示到HTML中

JS遍历数组并通过innerHTML 显示到HTML中

HTML代码

<body>
<div id="dailyList"></div>
</body>

JavaScript代码

function getDelayOrderInfo(){
        //自定义数组
        var Str = '';
		var Arr = [
			{
		        "materialName": "eiusmod enim dolor aliqua",
		        "qty": -21413570,
		        "dictStatus": 30
	        },
		    {
		        "materialName": "Ut veniam minim",
		        "qty": -64645376,
		        "dictStatus": 50
		    },
		    {
		        "materialName": "Excepteur id consequat reprehenderit",
		        "qty": -9399905,
		        "dictStatus": 30
		    },
		    {
		        "materialName": "dolor Lorem in est eu",
		        "qty": -55786600,
		        "dictStatus": 10
		    },
		    {
		        "materialName": "ut reprehenderit",
		        "qty": -45269221,
		        "dictStatus": 20
		    },
		    {
		        "materialName": "occaecat ex sunt pariatur",
		        "qty": 55450270,
		        "dictStatus": 40
		    },
		    {
		        "materialName": "anim nulla esse occaecat",
		        "qty": 71426454,
		        "dictStatus": 10
		    },
		    {
		        "materialName": "aliqua sunt amet",
		        "qty": -12119945,
		        "dictStatus": 30
		    },
		    {
		        "materialName": "incididunt ullamco consequat minim",
		        "qty": 71452085,
		        "dictStatus": 30
		    },
		    {
		        "materialName": "fugiat",
		        "qty": 56551946,
		        "dictStatus": 10
		    },
		    {
		        "materialName": "fugiat amet nisi",
		        "qty": -23880850,
		        "dictStatus": 10
		    }
		]
        for(let i = 0;i<Arr.length;i++){
            Str +=  '<ul>'
                        +'<li style="width:200px;">'+(Arr[i].materialName)+'</li>'
                        +'<li>'+(Arr[i].qty)+'</li>'
                        +'<li>'+(Arr[i].dictStatus)+'</li>'
                    +'</ul>'
        }
        //拼接完字符串数组后用innerHTML把它渲染到页面中
        document.getElementById('dailyList').innerHTML = Str 
    }
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值