调用另一个API后，JavaScript 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>

My task is to choose random 5 European cities and show some attributes but when a button is clicked I need to show a forecast of that city. 我的任务是随机选择5个欧洲城市并显示一些属性，但是当单击按钮时，我需要显示该城市的天气预报。 I attempt to use Lexical Scoping to and half of my application works the easy part where i show some attribute taken from the API, when i clicked the button forecast I have error with the response Error but the error is also the city i choose.If I use any city the, in the forecast is undefined. 我尝试使用Lexical Scoping，并且我的应用程序的一半很容易工作，即显示了从API中获取的某些属性，当我单击按钮预测时，响应错误出现错误，但错误也是我选择的城市。我使用的任何城市，在预测中都是不确定的。 I am not sure why I have this error and i dont have any insides tried closure If you don't know any answer I would appreciate even an insight or reference of work similar done. 我不确定为什么会出现此错误，而且我没有进行任何内部尝试的关闭。如果您不知道任何答案，我将不胜感激，甚至是对类似工作的见解或参考。

Thank you 谢谢

Answer 1

The problem is that your variable "dest" already contains the value. 问题在于您的变量“ dest”已经包含该值。 So you have in "dest" the name of your city and you use dest.value which is undefined because dest is a string and has no property called value. 因此，您在“目的地”中输入了城市名称，并使用了dest.value，该值是未定义的，因为dest是字符串，没有名为value的属性。 to fix your code just remove .value in the url: 要修复您的代码，只需删除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

调用另一个API后，JavaScript API返回未定义

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-12-29 20:12:56

调用另一个API后，JavaScript API返回未定义

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-12-29 20:12:56

解决方案1
2 已采纳 2017-12-29 20:12:56