1

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>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Bjorn
  • 13
  • 4

1 Answers1

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>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • thank you for this, i noticed when i run the code the date disappears , there is a class date in the h2, wondering how to get that to display in there, this is what I have in JS var currentDay = document.querySelector('.date'); currentDay.textContent = dayjs().format('MM/D/YYYY'); – Bjorn Jan 27 '21 at 23:32
  • That's a separate issue with the dayjs library you're using. I'd suggest starting a new question for it. – Rory McCrossan Jan 28 '21 at 09:08
  • hi @Rory McCrossan , when i run this code everything works perfectly except the image icon does not load, was wondering why, any ideas? – Bjorn Feb 01 '21 at 12:26
  • That depends on how you're building the icon `img` in your HTML. The URL should take the value of `weather.icon` and append it to the URL, like this: https://stackoverflow.com/a/49386144/519413 – Rory McCrossan Feb 01 '21 at 12:56