javascript - 如何让 API 查询的结果显示在 div 或 UL 中？

Question

我正在做一个项目，用户选择他们的州，然后程序在国家公园服务 API 中查询该州的公园，然后获取每个结果的纬度和经度，并查询 OpenWeatherMap API 以提供每个州的天气返回的地方。我认为我已经让链式 AJAX 请求工作了，但是我无法让 OpenWeather 返回的信息显示在页面上。我编写了我的 API 请求以在 HTML 中返回数据，因为它看起来像一个小图标并且与页面配合得很好。公园显示在 UL 中，理想情况下，天气图标会显示在其位置旁边，但此时我只需要它显示在某个地方，因此如果它们出现在单独的 div 中就可以了。预先感谢您的帮助。

      <div class="section no-pad-bot">
        <div class="container">
          <div class="row center">
            <a href="#searchid"><img src="search.png"></a>
          </div>
        </div>
      </div>
      <div class="parallax"><img src="b15.jpg" alt="Unsplashed background img 2"></div>
    </div>

    <div class="container">
      <div class="section">

        <div class="row">
          <div class="input-field col s12">
            <select multiple id="stateSelect">
              <option value="" disabled unselected>Choose your state</option>
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="DC">District Of Columbia</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="PA">Pennsylvania</option>
              <option value="PR">Puerto Rico</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
            </select>
            <label>Search</label>
            <button id="search-btn" class="btn waves-effect waves-light" type="submit" name="action">Submit
              <i class="material-icons right">send</i>
            </button>
          </div>
        </div>

        <div class="row">
          <ul id="search-results">
          </ul>
          <div id="weather-results">
          </div>
        </div>

      </div>
    </div>

var searchTerm = "";
var stateTerm = "";
var queryURL = "";




var parkName = "";
var parkDescription = "";
var parkLatLon = "";
var parkCity = "";
var parkURL = "";

var wxLat, wxLon = "";


document.addEventListener('DOMContentLoaded', function () {
    var elems = document.querySelector('select');
    elems.onchange = selectThem;
    var instances = M.FormSelect.init(elems);
    function selectThem() {
        var selectedOne = instances.getSelectedValues();
        console.log(selectedOne);
        stateTerm = selectedOne.join();
        console.log(stateTerm);
        queryURL = "https://api.nps.gov/api/v1/parks?q=" + searchTerm + "&stateCode=" + stateTerm + "&api_key=" + apiKey;
        console.log(queryURL);
    }

    $("#search-btn").click(function() {

        $("#search-results").empty();

        $.ajax({
            url: queryURL,
            method: "GET"
        }).then(function(response) {

            for (var i = 0; i < response.data.length; i++) {
              parkName = response.data[i].fullName;
              parkURL = response.data[i].url;
              parkLatLon = response.data[i].latLong;

              console.log(parkLatLon);
              var latEnd = parkLatLon.indexOf(".");
              wxLat = parkLatLon.substring(4,latEnd);
              console.log(wxLat);
              var lonStart = parkLatLon.lastIndexOf(":") + 1;
              var lonEnd = parkLatLon.lastIndexOf(".");
              wxLon = parkLatLon.substring(lonStart, lonEnd);
              console.log(wxLon);

              var wxResponse = "";

              var wxURL = "https://api.openweathermap.org/data/2.5/weather?lat=" + wxLat + "&lon=" + wxLon + "&APPID=7d303e69b0351c31f4dd317a06e61fed&mode=html&units=imperial";

                $.ajax({
                url: wxURL,
                method: "GET"
                }).then(function(wxResponse) {
                console.log(wxResponse);
                 console.log(response.Runtime);
                });

              console.log(parkLatLon); 

              $("#search-results").append("<li><a href=" + parkURL + ">" + parkName + "</li>" + wxResponse);
              $("#weather-results").append(wxResponse);
            }
        });
    })
});

标签： javascriptjqueryhtmlajax