Issues integrating response from OpenWeatherMap in to my HTML

I’m using the OpenWeatherMap API to get to display certain items in HTML and my code does not display them.

$('.`btn`').click(function() {
  var city = $('.inputValue').val();
  var key = '88da1611665dfe9338cd6679dee95466';

  $.ajax({
    url: 'http://api.openweathermap.org/data/2.5/weather',
    dataType: 'json',
    type: 'GET',
    data: {
      q: city,
      appid: key,
      units: 'metric'
    },
    success: function(data) {
      var temp = '';
      $.each(data.weather, function(index, val) {
        wf += '<p><b>' + data.name + "</b><img src=" + val.icon + ".png></p>" +
         data.main.temp + '&deg;F ' + ' | ' + val.main + ", " +
          val.humidity + val.wind + val.uv
      }, $("showWeather").html(temp));
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="4">
      <nav class="navbar navbar-light bg-light">
        <p><b>Search for a city:</p></b>
          <form class="d-flex">
            <input type="search" class="inputValue" placeholder="" aria-label="Search">
            <button class="btn btn-outline-success">
              <i class="fas fa-search"></i>
            </button>
          </form>
      </nav>
    </div>
  </div>
  <div class="col-8">
    <div class="row">
      <h2 id="showWeather" class="date"></h2>
      <p>Temperature:</p>
      <p>Humidity:</p>
      <p>Wind Speed:</p>
      <p>UV Index:</p>
    </div>
  </div>
</div>

61 thoughts on “Issues integrating response from OpenWeatherMap in to my HTML”

Leave a Comment