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

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

我试图调用当前条件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/[email protected]/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)
    });

});
javascript function api variables openweathermap
1个回答
0
投票

好吧，你的代码段有一些错误。

  1. function oneCall() {... 应该是... function oneCall(coord) { (调用函数时传递的参数不在函数本身声明)
  2. coord 是一个对象，具有 lat 和 lon 属性，而不是像你现在使用的数组，所以你应该有一个 var ocLat = coord.lat 和 var ocLon = "&lon=" + coord.lon
  3. 的声明中的 console.log。oneCall() 因为它是在你有了 return.

你也可以使用 data ajax()设置的选项，通过提供一个对象来为你查询参数，见。https:/api.jquery.comjquery.ajax#jQuery-ajax-settings。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.