Javascript/HTML only returning some variables for ID

Question

I have a modal in my HTML code like this ...

       <!-- Modal body -->
        <div class="modal-body">
          <h6 id="capitalCity" class="modal-sub-header"></h6>
          <hr>
          <ul class="dem">
              <p id="date"></p>
              <h4 id="capital"></h4>
              <p id="description"></p>

etc...

and my linked JavaScript file function is like this, where it is using AJAX calls to both a PHP file and an API to get information regarding the current weather in a country

function getWeather(countryName) {
  const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

  let dateObj = new Date();
  let month = monthNames[dateObj.getUTCMonth()];
  let day = dateObj.getUTCDate() - 1;
  let year = dateObj.getUTCFullYear();

  let todaysDate = `${month} ${day}, ${year}`;
  document.getElementById('date').textContent = todaysDate

  $.ajax({
    url: "assets/geojson/countryBorders.geo.json",
    type: "GET",
    dataType: "json",
    data: {

    },
    success: function(result) {
      let features = result["features"];

      let countryFeature = findFeatureFromName(countryName);
      let countryCode = JSON.stringify(countryFeature.properties.iso_a2).replace(/"/g, "")

      $.ajax({
        url: "assets/php/countryInformation.php",
        type: 'POST',
        dataType: 'json',
        data: {
          country: countryCode
        },
        success: function(result) {
          console.log(result);
          console.log(JSON.stringify(result));
          let capitalCity = (result['data'][0]['capital']);
          console.log(capitalCity)
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=${capitalCity}&APPID=2d48b1d7080d436945hbctest09ea964e645ccd1ec93f&units=metric`)
            .then(response => response.json())
            .then(data => {
              console.log(data)
              $('#wind').html(data['wind']['speed']);
              $('#description').html(data['weather']['description']);
            })
        }
      })
    }
  })
  document.getElementById('capital').textContent = capitalCity
}

The date ID in the HTML is correctly returned but capital and description are not being returned and I can't see why?

And also why mixing plain JS (`document.getElementById`) with jquery (`$(#...)`) ? Futhermore, you are accessing (at least parts of) you result wrong. `data['weather']` as returned from openweathermap is an array, so you would need to access `data['weather'][0]['description']` — derpirscher, Oct 29 '22 at 14:06
Furthermore, you have a problem with async code. You are setting the value of `capitalCity = ...` in the callback of an asynchronous function. Yet you are accessing it outside of this async code block, thus, it's not assigned yet. — derpirscher, Oct 29 '22 at 14:07
And last but not least, when asking a question and posting code, please get your code formatting in order. Such wrong-formatted code is quite hard to read ... — derpirscher, Oct 29 '22 at 14:09
@derpirscher even if I use ```(document.getElementById)``` within thr async function it still doesn't seem to work. The description is now working thanks to your suggestion — GIS_User2, Oct 29 '22 at 14:11

Javascript/HTML only returning some variables for ID

0 Answers0