JavaScript API returns 在调用另一个 API 后变为未定义

Question

//app.js
const SEARCH_VIEW  = document.getElementById('search_view');
const RESULTS_VIEW = document.getElementById('results_view');
const FORECAST_VIEW = document.getElementById('forecast_view')


function loadCities(){


    const cities = ["London", "Paris", "Madrid", "Lisbon","Ohrid"];

    var options = null;

    var dest = document.getElementById('dest');

    //Looping the cities
    cities.forEach(city => {
        options += '<option>' + city +'</options>';
    });

    dest.innerHTML = options;
}

function gettingWeather(){

    // 1. Open the Url
    var dest = document.getElementById('dest').value;
    var url = ('http://api.openweathermap.org/data/2.5/weather?q='+ dest + '&appid=exampleAppId');
    console.log(url);
    console.log(dest);

    // 2. Fetch the URL

    fetch(url)
        .then(response => {
        if(response.status !== 200){
            console.error("API failed, Status Code " + response.status);
            return;
        }
        console.log(response);
    // 3.We make the response .json and open the data

        response.json().then(data => {
        console.log(data);
        RESULTS_VIEW.style.visibility = 'visible';
        // Temperature
        document.getElementById('Temperature').textContent = data.main.temp;    

        //Wind

        document.querySelector('.Wind').textContent = data.wind.speed * data.wind.deg;
        //Description
        document.querySelector('.Description').textContent = data.weather[0].description;   
        });

        }).catch(err => {
        console.error("Fetch error "+ err);
    });
}

function forecast(){
    const API_BASE = 'http://api.openweathermap.org/data/2.5/forecast?mode=json&';
    const API_KEY = 'appid=exampleAppId&';
    var dest = document.getElementById('dest').value;
    var url = API_BASE + API_KEY + 'q=' + dest.value;
    console.log(url);
    console.log(dest.value);

    // 2. Fetch the URL

    fetch(url)
        .then(response => {
        if(response.status !== 200){
            console.error("API failed, Status Code " + response.status);
            return;
        }
            console.log(response);
    // 3.We make the response .json and open the data

        response.json().then(data => {
            console.log(data);

            RESULTS_VIEW.style.visibility = 'hidden';
            FORECAST_VIEW.style.visibility= 'visible';



    });

    }).catch(err => {
             console.error("Fetch error "+ err);
    });
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width ,initial-scale=1">
<link href="styles.css" type="text/css" rel="stylesheet">

</head>
<body onload="loadCities();">







<div class="container">

    <div id = "results_view">
         <div class="inputWrapper">
            <h1> Weather App </h1>
            <p>Choose a city.</p>
            <select  id="dest" onchange="gettingWeather();"  width=150 style="width:150px" ></select><br>
            <label>Temperature</label>
            <label class="Temperature" id="Temperature"></label><br>
            <label>Wind</label>
            <label class="Wind" id="Wind"></label><br>
            <label>Description</label>
            <h1 class="Description" id="Description"></h1>

            <button onclick="forecast();">Forecast</button>
        </div><!-- InputWrapper -->
    </div>
    <div id="forecast_view">
        <h1>ForeCast</h1>
    </div>

 </div> <!-- end container -->




 <script src="app.js"></script> 
</body>
</html>

我的任务是随机选择 5 个欧洲城市并显示一些属性，但是当单击按钮时我需要显示该城市的预报。我尝试使用词法作用域，我的应用程序有一半在简单的部分工作，我显示从 API 中获取的一些属性，当我单击按钮 forecast 我有错误响应Error but the error is also the city i choose.If I use any city the, in the forecast is undefined.我不确定为什么会出现此错误，并且我没有尝试过任何内部操作 closure 如果您不知道任何答案，即使是对类似工作的洞察力或参考，我也将不胜感激。

谢谢

Answer 1

问题是您的变量 "dest" 已经包含该值。所以你在 "dest" 中有你的城市名称，你使用 dest.value 这是未定义的，因为 dest 是一个字符串并且没有属性调用值。要修复您的代码，只需删除 url:

中的 .value

const API_BASE = 'http://api.openweathermap.org/data/2.5/forecast?mode=json&';
const API_KEY = 'appid=6c345b20d0c8fac21a36761eb7d6cd38&';
var dest = document.getElementById('dest').value;
var url = API_BASE + API_KEY + 'q=' + dest; // only dest NOT dest.value
console.log(dest); // the city selected

JavaScript API returns 在调用另一个 API 后变为未定义

JavaScript API returns to undefined after calling another API

javascript

api

weather-api

forecasting