代码笔记

代码:


<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8">
		<title> </title>
		<style type="text/css">
			ul {
				border: 1px black solid;
			}

			ul li {
				display: flex;
				justify-content: space-around;
				border: 1px pink solid;
			}
		</style>

	</head>

	<body>
		<h1>各地区汇总数量</h1>
		<ul id="ul">
			<li> <span></span> <i></i> </li>
		</ul>
	</body>

	<script type="text/javascript">
		var newarr = [];

		fetch('./1.json')
			.then(response => response.json())
			.then(data => {
				var newstr = data.data.detail
				newstr.forEach((item, index) => {
					// console.log(item.cities);
					var totlenum = 0;
					item.cities.forEach((item) => {
						return totlenum += item.confirmedCount
					})
					newarr.push({
						"provinceName": item.provinceName,
						"totlenum": totlenum
					})
				})
				let html = '';
				newarr.forEach((item, index) => {
					html += `<li> <span>${item. provinceName}</span> <span>${item. totlenum}</span>  </li>  `
				})
			 document.getElementById('ul').innerHTML = html
				
				console.log(newarr);  //  下图  52 行打印
			})
			
			console.log(newarr);  //  下图  55 行打印
			
			
	</script>

</html>

在这里插入图片描述

问题1: then 内的数据可以渲染使用。 外边的数据不可以使用( 查资料说是异步的问题 )
相同点是: 点开都有数据。
不同点: 是浏览器上的展现形式不一样。一个 [] 一个[34]
谁能说个123来 …
在这里插入图片描述

   2.   数组 prote上有个Aray(0) , 而对象上没有。 这是什么意思

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值