Issues integrating response from OpenWeatherMap in to my HTML

Question

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>

Answer 1

There's quite a few individual issues in your code:

• You have backticks in the .btn selector which are invalid, remove them.
• You need to prevent the standard form submission so that the AJAX call can fire and return data without the page refreshing. To do this call preventDefault() on the event which is fired, ideally on the submit of the form, not click of .btn.
• </p></b> tags are the wrong way around
• .html(temp) needs to be placed outside the each(), and definitely not as an additional argument passed to it
• wf += should be temp += as that's what your variable is called
• You can use map() along with template literals to build the HTML string more succinctly.
• You're missing the # on $('showWeather')
• wind is an object so you can't concatenate it to the string directly. Access its speed or deg properties (or both).
• humidity is a property of main, not the weather you're looping through
• There is no uv property anywhere in the response, so that needs to be removed.

With all that fixed, try this:

$('.d-flex').on('submit', function(e) {
  e.preventDefault();
  var city = $('.inputValue').val();
  var key = '88da1611665dfe9338cd6679dee95466';

  $.ajax({
    url: 'https://api.openweathermap.org/data/2.5/weather',
    dataType: 'json',
    type: 'GET',
    data: {
      q: city,
      appid: key,
      units: 'metric'
    },
    success: function(data) {
      let html = data.weather.map(loc => `<p><b>${data.name}</b><img src="${loc.icon}.png" /></p>${data.main.temp}&deg;F | ${loc.main}, ${data.main.humidity}%, ${data.wind.speed}kph @ ${data.wind.deg}&deg;`);
      $("#showWeather").html(html);
    }
  });
});

<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:</b></p>
        <form class="d-flex">
          <input type="search" class="inputValue" placeholder="" aria-label="Search" value="miami">
          <button class="btn btn-outline-success">
            Search
            <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>