OpenWeather API, как передать ответ от одного ответа на другой вызов? - PullRequest
Новая
       91

OpenWeather API, как передать ответ от одного ответа на другой вызов?

0 голосов
/ 06 мая 2020

Я пытаюсь вызвать API текущих условий, получить ответ и задать широту и долготу в качестве параметра второго вызова API OneCall. Ниже вы можете видеть, что я попытался сделать это, передав координату в функцию, а затем объявив, какую часть объекта использовать в каждой части 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)
    });

});

1 Ответ

0 голосов
/ 07 мая 2020

Ну, в вашем фрагменте есть ошибки:

  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.com/jquery.ajax/#jQuery - ajax -настройки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...