API data can't place Array in innerHTML

Question

I tried to fetch data from free weather API and replace it in the DOM <div class="actualweather">Rain</div> and instead it's blank. I noticed when I push() the data to an Array let sky = []it shows me in the console ["Snow"] when I call the variable sky. I also tried to debug the code and got undefined or empty string when I was converting the Array to a String.

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>

You're pushing data into the `sky` array after you read the value from it and assign it to `innerText` — Quentin, Jan 09 '20 at 08:23
Aside: There is no point (and it makes your code really confusing) in `await`ing the return value of `*.push()` which isn't returning a Promise. — Quentin, Jan 09 '20 at 08:24

score -1 · Answer 1 · answered Jan 09 '20 at 08:28

Inside the async call itself you can do it, check this one.

Note since temperature returns as 0.18, so when you do Math.floor(0.18) it is becoming zero

Kindly check this one

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>

Anyone can explain why it is downvoted – Learner Jan 09 '20 at 09:34 — Learner, Jan 09 '20 at 09:34

API data can't place Array in innerHTML

1 Answers1