API数据无法将数组放入innerHTML [duplicate]

问题描述 投票：-1回答：1

我试图从免费的天气API中获取数据，并将其放置在Dom <div class="actualweather">Rain</div>中，并插入空白。我注意到，当我将数组中的数据push() let sky = []命名为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">&#9925</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 arrays api fetch innerhtml
1个回答
0
投票

在异步调用本身中，您可以执行此操作，请选中此复选框。

注意，因为温度返回为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">&#9925</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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.