I am working on a project where the user selects their state and then the program queries the National Park Service API for parks in that state, then takes the latitude and longitude of each results and queries the OpenWeatherMap API to provide the weather at each of the places returned. I already have the chained AJAX request working I think but I'm having trouble getting the info returned from OpenWeather to display on the page. I wrote my API request to return data in HTML because it looks like a little icon and works well with the page. The parks display in a UL and ideally the weather icon would show up next to its location, but at this point I just need it to show up somewhere so it would be fine if they appear in a separate div. Thank you in advance for your help.
<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);
}
});
})
});
and the JSON data received after the request