Question

我正在尝试调用当前条件API，获取响应，并将纬度和经度作为对OneCall API的第二次调用的参数。在下面，您可以看到我试图通过将coord传递给函数，然后声明要在URL的每个部分中使用对象的哪一部分来实现此目的，但是它一直未定义。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Dashboard</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/style.css">
</head>
<body>

    <!--Main Heading-->

    <div class="container">
        <div class="row">
            <div class="col text-center">
                <h1 id="main-heading">Weather Dashboard</h1>
            </div>
        </div>


        <div class="row">
            <div class="col col-lg-3">


        <!--Search Bar-->  

                <h5>Search for a City</h5>

                <!--Search Button-->

                <div class="input-group mb-3">
                    <input id="searchBar" type="text" class="form-control" placeholder="City" aria-label="Recipient's username" aria-describedby="button-addon2">
                    <div class="input-group-append">
                      <button class="btn btn-danger" type="button" id="searchBtn">Search</button>
                    </div>
                </div>

                <!--Recently Searched Cities Aside-->

                <div class="card" style="width: 18rem;">
                    <div class="card-header">
                      Recently Searched Places
                    </div>
                    <ul id="recentSearch" class="list-group list-group-flush">
                      <li class="list-group-item">Minneapolis, MN</li>
                      <li class="list-group-item">Dallas, TX</li>
                      <li class="list-group-item">San Francisco, CA</li>
                    </ul>
                  </div>
            </div>

                  <!--Current Conditons Display-->

            <div class="col">
                <div id="currentConditions" class="card">
                    <h5 class="card-header">Current Conditions</h5>
                    <div class="card-body">
                      <h3 id="cityName" class="card-title">Minneapolis, MN</h3>
                      <p id="currentTemp" class="card-text">Temp: 54</p>
                      <p id="currentHumidity" class="card-text">Humidity: 43</p>
                      <p id="currentWindSpeed" class="card-text">Wind Speed: 12mph</p>
                      <p id="uvIndex" class="card-text">UV Index: 9.49</p>
                    </div>
                  </div> 


                  <!--5 Day Forecast-->

                  <h4>5 Day Forecast:</h4>

            <div class="row">
                <div id="dayOne" class="fiveDay col">
                    <h5>Live Date</h5>
                    Weird Symbol Thing
                    <p>Temp: 85.45</p>
                    <p>Humidity: 43%</p>
                </div>

                <div id="dayTwo" class="fiveDay col">
                    <h5>Live Date</h5>
                    Weird Symbol Thing
                    <p>Temp: 85.45</p>
                    <p>Humidity: 43%</p>
                </div>

                <div id="dayThree" class="fiveDay col">
                    <h5>Live Date</h5>
                    Weird Symbol Thing
                    <p>Temp: 85.45</p>
                    <p>Humidity: 43%</p>
                </div>

                <div id="dayFour" class="fiveDay col">
                    <h5>Live Date</h5>
                    Weird Symbol Thing
                    <p>Temp: 85.45</p>
                    <p>Humidity: 43%</p>
                </div>

                <div id="dayFive" class="fiveDay col">
                    <h5>Live Date</h5>
                    Weird Symbol Thing
                    <p>Temp: 85.45</p>
                    <p>Humidity: 43%</p>
                </div>
            </div>

            </div>

    </div>


    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha256-T/f7Sju1ZfNNfBh7skWn0idlCBcI3RwdLSS4/I7NQKQ=" crossorigin="anonymous"></script>
    <script src="assets/script.js"></script>
</body>
</html>

JavaScript

function buildQueryURL() {

    var baseURL = "http://api.openweathermap.org/data/2.5/weather?q=";
    var key = "&units=imperial&appid=6c743e42a0f9ac97fab6ec81e5e3acc9";
    var querySearch = $("#searchBar")
        .val()
        .trim();
    var all = baseURL + querySearch + key;
    return baseURL + querySearch + key;
};

function oneCall() {

    var ocBaseURL = "http://api.openweathermap.org/data/2.5/onecall?lat=";
    var ocLat = coord[0];
    var ocLon = "&lon=" + coord[1];
    var ocKey = "&units=imperial&appid=6c743e42a0f9ac97fab6ec81e5e3acc9";
    return ocBaseURL + ocLat + ocLon + ocKey;
    console.log(ocBaseURL + ocLat + ocLon + ocKey);


};


$("#searchBtn").on("click", function(event) {
    event.preventDefault();
    var queryURL = buildQueryURL();
    console.log(queryURL);
    $.ajax({
        url: queryURL,
        method: "GET"
    }).then(function(response) {
        $("#cityName").text(response.name);
        $("#currentTemp").text("Temp: " + response.main.temp);
        $("#currentHumidity").text("Humidity: " + response.main.humidity);
        $("#currentWindSpeed").text("Wind Speed: " + response.wind.speed);
        $("#uvIndex").text("UV Index: " + response.main.temp);
        var coord = response.coord;
        oneCall(coord);
    }).catch(err => {
        // handle error here
        throw new Error(err)
    });

});

Answer 1

好吧，您的代码段中有一些错误：

BTypeTransaction应该为function oneCall() {...（调用函数时传递的参数未在函数本身中声明）
function oneCall(coord) {是具有coord和lat属性的对象，而不是您正在使用的数组，因此您应该具有lon和var ocLat = coord.lat < / li>
在var ocLon = "&lon=" + coord.lon声明中包含的console.log将不起作用，因为它位于oneCall()之后。

您还可以使用ajax（）设置的return选项，通过为它提供一个对象来为您的参数查询，请参见：https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings

OpenWeather API，如何将响应从一个响应传递到另一个调用？

1 个答案: