代码:
<!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) , 而对象上没有。 这是什么意思


本文探讨了异步编程中数据获取与DOM渲染的问题,通过一个具体的HTML与JavaScript实例,展示了fetch API如何从JSON文件中读取数据,并将其动态渲染到网页上。文章对比了同步与异步操作在数据可用性上的差异,以及如何正确处理异步返回的数据。

被折叠的 条评论
为什么被折叠?



