javascript - API 数据不能在 innerHTML 中放置数组
问题描述
我试图从免费的天气 API 中获取数据并将其放在 Dom 中<div class="actualweather">Rain</div>
并将其设置为空白。我注意到当我push()
将数据写入数组时,当我调用变量天空时,let sky = []
它会在控制台中显示我。["Snow"]
当我将数组转换为字符串时,我还尝试调试代码并获取undefined
或空字符串。
const API = 'https://api.openweathermap.org/data/2.5/weather?id=524894&APPID=52d43a5ccf494597a10177119035f9b5&units=metric';
const temp = document.querySelector('.number');
const actweather= document.querySelector('.actualweather');
const icon= document.querySelector('.icon');
weather()
async function weather(){
let get = await fetch(API);
let result = await get.json();
let heat = await temperature.push(result.main.temp);
let skyy = await sky.push(result.weather[String(0)].main)
}
const temperature = [];
temp.innerHTML= Math.floor(temperature);
let sky = [];
actweather.innerText= sky;
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.color{
background-color: rgb(52, 72, 163,0.3);
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: 10;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: fill;
z-index: -1;
}
a {
text-decoration: none !important;
padding:20px;
font-family: 'Varela Round', sans-serif;
font-size: medium;
color: white;
}
#header{
position: absolute;
width: 100%;
height: 100px;
}
.navigation ul {
position: relative;
display:flex;
flex-direction: row;
justify-content: center;
list-style:none;
margin-top:50px;
z-index: 20;
}
.weather{
/*background-color: red;*/
position: absolute;
display: flex;
flex-direction:row;
justify-content: center;
align-items: center;
flex-basis:0;
z-index: 22;
width: 200px;
height: 100px;
right:0;
top:0;
font-family: 'Varela Round', sans-serif;
font-size: 14px;
color: white;
padding:10px
}
.temp{
display: flex;
justify-content: center;
}
.row1{
display: flex;
min-height: 20px;
width: 1px;
background-color: white;
margin:0 10px 0 10px;
border-radius: 10%;
}
.row2{
display:flex;
min-height: 1px;
width:100px;
background-color: white;
margin:10px 0 10px 0;
border-radius: 10%;
}
.date>*{
display:inline-block;
justify-content: center;
padding: 0 5px 0 0;
}
.icon{
display:flex;
flex-direction: row;
background-color: yellow;
padding: 15px;
margin:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c|Varela+Round&display=swap" rel="stylesheet">
</head>
<body>
<div class="color"></div>
<video autoplay muted loop id="myVideo">
<source src="./moscow.mp4" type="video/mp4">
</video>
<header id="header">
<div class="navigation">
<nav>
<ul>
<li><a href="#">CAR</a></li>
<li><a href="#">RESTAURANTS</a></li>
<li><a href="#">MUSEUM</a></li>
<li><a href="#">CINEMA</a></li>
<li><a href="#">THEATER</a></li>
</ul>
</nav>
</div>
<div class="weather">
<div class="icon">⛅</div>
<div>
<div class="temp">
<div class="number">7</div>
<div class="degree">°C</div>
<div class="row1"></div>
<div class="actualweather">Rain</div>
</div>
<div class="row2"></div>
<div class="date">
<div class="month">Jan</div>
<div class="jear">04.2020</div>
</div>
</div>
</div>
</header>
</body>
<script src='script.js'></script>
</html>
解决方案
在异步调用本身内你可以做到这一点,检查这个。
请注意,由于温度返回为 0.18,所以当您执行 Math.floor(0.18) 时,它会变为零
请检查这个
const API = 'https://api.openweathermap.org/data/2.5/weather?id=524894&APPID=52d43a5ccf494597a10177119035f9b5&units=metric';
const temp = document.querySelector('.number');
const actweather= document.querySelector('.actualweather');
const icon= document.querySelector('.icon');
weather()
let heat;
let skyy;
async function weather(){
let get = await fetch(API);
let result = await get.json();
heat = result.main.temp;
console.log(heat)
skyy = result.weather[0].main
console.log(skyy)
temp.innerHTML= Math.floor(heat);
actweather.innerText= skyy;
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.color{
background-color: rgb(52, 72, 163,0.3);
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: 10;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: fill;
z-index: -1;
}
a {
text-decoration: none !important;
padding:20px;
font-family: 'Varela Round', sans-serif;
font-size: medium;
color: white;
}
#header{
position: absolute;
width: 100%;
height: 100px;
}
.navigation ul {
position: relative;
display:flex;
flex-direction: row;
justify-content: center;
list-style:none;
margin-top:50px;
z-index: 20;
}
.weather{
/*background-color: red;*/
position: absolute;
display: flex;
flex-direction:row;
justify-content: center;
align-items: center;
flex-basis:0;
z-index: 22;
width: 200px;
height: 100px;
right:0;
top:0;
font-family: 'Varela Round', sans-serif;
font-size: 14px;
color: white;
padding:10px
}
.temp{
display: flex;
justify-content: center;
}
.row1{
display: flex;
min-height: 20px;
width: 1px;
background-color: white;
margin:0 10px 0 10px;
border-radius: 10%;
}
.row2{
display:flex;
min-height: 1px;
width:100px;
background-color: white;
margin:10px 0 10px 0;
border-radius: 10%;
}
.date>*{
display:inline-block;
justify-content: center;
padding: 0 5px 0 0;
}
.icon{
display:flex;
flex-direction: row;
background-color: yellow;
padding: 15px;
margin:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c|Varela+Round&display=swap" rel="stylesheet">
</head>
<body>
<div class="color"></div>
<video autoplay muted loop id="myVideo">
<source src="./moscow.mp4" type="video/mp4">
</video>
<header id="header">
<div class="navigation">
<nav>
<ul>
<li><a href="#">CAR</a></li>
<li><a href="#">RESTAURANTS</a></li>
<li><a href="#">MUSEUM</a></li>
<li><a href="#">CINEMA</a></li>
<li><a href="#">THEATER</a></li>
</ul>
</nav>
</div>
<div class="weather">
<div class="icon">⛅</div>
<div>
<div class="temp">
<div class="number">7</div>
<div class="degree">°C</div>
<div class="row1"></div>
<div class="actualweather">Rain</div>
</div>
<div class="row2"></div>
<div class="date">
<div class="month">Jan</div>
<div class="jear">04.2020</div>
</div>
</div>
</div>
</header>
</body>
<script src='script.js'></script>
</html>
推荐阅读
- javascript - 没有在材质对话框组件上调用角度材质主题
- .net - VB.NET 继承 IntelliSense 幻象成员
- c# - 在 Func 中通过 Lembda 传递子类型
- javascript - Laravel - 使用来自数据库功能改进的数据填充图表
- firebase - Firebase 短网址不重定向
- python - 如何更改绘图轴的基础?(Python,Matplotlib)
- python - 在我抓到一个鸡蛋之后,一切都停止了
- python - 如何根据 Pandas 中的另一个 DataFrame 更改 DataFrame 某列中的值
- angular - 为什么 DragDrop 在材质对话框中不起作用?
- python - 如何让我的代码更快地找到最小值?