Мой вызов API не отображает данные, которые я вызываю

Question

Я пытаюсь, чтобы на моем веб-сайте прогноза погоды отображалась погода. Вот мой код. Я чувствую, что я написал это правильно, но вывод это заявив иначе. Я написал это Jquery.

У меня такое ощущение, что что-то не так с оператором IF вызова AJAX.

Большое спасибо

PS. Я намеренно вынул ключ для приложения погоды.

Спасибо.

// Wait until Dom has completed loading
$(document).ready(function() {

  // Testing that logic.js has been successfully linked to index.html.
  console.log("logic.js is linked successfully");

  // GLOBAL VARIABLES

  // SELECTORS
  // selectors for left side column
  let searchCity = $(".searchCity");
  let cityList = $(".cityList");

  let searchButton = $(".searchButton");
  let searchHistory = [];

  // selectors for right side column
  let weatherArea = $(".weatherArea");

  let forecastArea = $(".cardArea");

  // VARIABLES for AJAX
  let searchedCity = $(searchCity).val();
  let queryURL = "api.openweathermap.org/data/2.5/forecast?q=" + searchedCity + "&appid=APIKEYGOESHERE"
// I took out my key for this question

  // BUILDING FUNCTIONS

  // When user clicks search button...
  $(searchButton).click(function(event) {
    event.preventDefault();
    console.log("requesting weather data...");
    // Push user's search into variable array
    searchHistory.push(searchedCity);

    // If the search field is not blank...  -- This if statement may be breaking my code, still testing
    if (searchedCity != "") {
      // Locally store searchHistory -- having issues getting this to work
      localStorage.setItem("searchHistory", searchHistory);

      // Request weather data from OpenWeatherMap API
      $.ajax({
          url: queryURL,
          method: "GET",
          dataType: "jsonp",
        })
        // When weather data response is returned...
        .then(function(response) {
          console.log(response);
          // Display weather data in weatherArea 
          let weatherData = show(response);
          $(weatherArea).html(weatherData);

          // Display forecast data in forecastArea

          let forecastData = "";


          // For each item in response...
          for (var i in response.list) {
            if (i > 0 && response.list[i].dt_txt.indexof("12:00") > -1) {
              // Create variable to contain forecast data
              let forecastArray = [
                "<div class = 'col-sm-2 day'>",
                "<p>",

                response.list[i].dt_txt.split(" ")[0],
                "</p>",
                "<img src = 'http://openweathermap.org/img/wn/' + response.list[i].weather[0].icon + '@2x.png'>",
                "<p> Temp: ",

                response.list[i].main.temp,
                " degrees</p>",
                "<p> Humidity: ",

                response.list[i].main.humidity,
                "%</p>",
                "<p> Wind Speed: ",

                response.list[i].main.wind.speed,
                " mph</p>",
                "</div>"
              ];
              // Add forecast Data to forecastArray
              forecastData += forecastArray.join("");
            }
          }
          // Display forecast data in forecastArea
          $(forecastArea).html(forecastData);
          $(searchCity).val("");
        });
    }
    // If the search field is empty...
    else {
      $(weatherArea).text("Search field can't be empty");
      $(forecastArea).text("Search field can't be empty");
    }
  });
  // function for showing the response data for the weather
  function show(response) {
    console.log("Showing Response: ", response);

    return response.city.name + "<h3> (" + response.list[0].dt_txt.split(' ')[0] + ") </h3>" +
      "<p class = 'lead'>Temp: " + response.list[0].main.temp + " degrees</p>" +
      "<p class = 'lead'>Humidity: " + response.list[0].main.humidity + " %</p>" +
      "<p class = 'lead'>Wind Speed: " + response.list[0].wind.speed + " mph</p>";
  };
  // Get searh history from local storage and display in cityList
  function showHistory() {
    let searchStorage = localStorage.getItem("searchHistory")
    $(cityList).append("<tr>").append("<td>" + searchStorage + "</td>")
  };

  showHistory();

  // Close of 'document.ready' function
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./assets/style.css">
  <title>Weather Dashboard</title>
</head>

<body>
  <!-- Row 1 - Header -->
  <header class="topBar">
    <row>
      <h1 class="pageTitle">Weather Dashboard</h1>
    </row>
  </header>

  <div class="container-fluid">
    <!-- Row 2 - Body -->
    <div class="row">
      <!-- Row 2, Column 1 - left side -->
      <div class="col-sm-3">
        <!-- Row 2, Column 1, Row a - City Search -->
        <div class="row">
          <div class="col-sm-12">
            <div class="row searchTitle">
              <div class="col-sm-12">
                <h2 class="lead">Search for a City:</h2>
              </div>
            </div>
            <div class="row searchArea">
              <div class="col-sm-9">
                <input type="text" class="searchCity" placeholder="Choose a city...">
              </div>
              <div class="col-sm-3">
                <button type="submit" class="searchButton">
                                        <i class = "fa fa-search"></i>
                                    </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Row 2, Column 1, Row b - City List -->
        <div class="row">
          <div class="col-sm-11 listArea">
            <table class="cityList">
              <tr>
                <th>Recent Searches</th>
            </table>
          </div>
          <div class="col-sm-1">
          </div>
        </div>
      </div>
      <!-- Row 2, Column 2 - right side -->
      <div class="col-sm-9 rightSide">
        <!-- Row 2, Column 2, Row a - Current Weather -->
        <div class="row">
          <div class="col-sm-12">
            <div class="weatherArea">
              <p>weather area</p>
            </div>
          </div>
        </div>
        <!-- Row 2, Column 2, Row b - 5-day Forecast Title -->
        <div class="row">
          <div class="col-sm-12">
            <div class="forecastTitle">
              <h2 class="lead">5-Day Forecast:</h2>
            </div>
          </div>
        </div>
        <!-- Row 2, Column 2, Row c - 5-day Forecast Cards -->
        <div class="row">
          <div class="col-sm-12">
            <div class="row cardArea">
              <div class="col-sm-2.2">
                <div class="card forecast-01">
                  <div class="card-body bg-info">forecast</div>
                </div>
              </div>
              <div class="col-sm-0.25"></div>
              <div class="col-sm-2.2">
                <div class="card forecast-02">
                  <div class="card-body bg-info">forecast</div>
                </div>
              </div>
              <div class="col-sm-0.25"></div>
              <div class="col-sm-2.2">
                <div class="card forecast-03">
                  <div class="card-body bg-info" id="cardBody">forecast</div>
                </div>
              </div>
              <div class="col-sm-0.25"></div>
              <div class="col-sm-2.2">
                <div class="card forecast-04">
                  <div class="card-body bg-info">forecast</div>
                </div>
              </div>
              <div class="col-sm-0.25"></div>
              <div class="col-sm-2.2">
                <div class="card forecast-05">
                  <div class="card-body bg-info">forecast</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Links to js libraries and external logic sheet -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="./assets/logic.js"></script>
</body>

</html>

Answer 1

Просто небольшие изменения в вашем коде: https://i.imgur.com/nr3yOY8.png

// Wait until Dom has completed loading
$(document).ready(function() {

  // Testing that logic.js has been successfully linked to index.html.
  console.log("logic.js is linked successfully");

  // GLOBAL VARIABLES

  // SELECTORS
  // selectors for left side column
  let searchCity = $(".searchCity");
  let cityList = $(".cityList");

  let searchButton = $(".searchButton");
  let searchHistory = [];

  // selectors for right side column
  let weatherArea = $(".weatherArea");

  let forecastArea = $(".cardArea");

  // BUILDING FUNCTIONS

  // When user clicks search button...
  $(searchButton).click(function(event) {
    event.preventDefault();
    console.log("requesting weather data...");

    //GET VALUE WHEN CLICKED
    // VARIABLES for AJAX
    let searchedCity = $(searchCity).val();
    let queryURL = "https://api.openweathermap.org/data/2.5/forecast?q=" + searchedCity + "&appid=YOUR_KEY"
    // I took out my key for this question

    // Push user's search into variable array
    searchHistory.push(searchedCity);

    // If the search field is not blank...  -- This if statement may be breaking my code, still testing
    if (searchedCity != "") {
      // Locally store searchHistory -- having issues getting this to work
      localStorage.setItem("searchHistory", searchHistory);

      // Request weather data from OpenWeatherMap API
      $.ajax({
          url: queryURL,
          method: "GET",
          dataType: "jsonp",
        })
        // When weather data response is returned...
        .then(function(response) {
          console.log(response);
          // Display weather data in weatherArea 
          let weatherData = show(response);
          $(weatherArea).html(weatherData);

          // Display forecast data in forecastArea

          let forecastData = "";


          // For each item in response...
          for (var i in response.list) {
            if (i > 0 && response.list[i].dt_txt.indexOf("12:00") > -1) { //NOT indexof
              // Create variable to contain forecast data
              let forecastArray = [
                "<div class = 'col-sm-2 day'>",
                "<p>",

                response.list[i].dt_txt.split(" ")[0],
                "</p>",
                "<img src = 'http://openweathermap.org/img/wn/" + response.list[i].weather[0].icon + "@2x.png'>", //CORRECTED THIS
                "<p> Temp: ",

                response.list[i].main.temp,
                " degrees</p>",
                "<p> Humidity: ",

                response.list[i].main.humidity,
                "%</p>",
                "<p> Wind Speed: ",

                response.list[i].wind.speed,//NOT response.list[i].main.wind.speed,
                " mph</p>",
                "</div>"
              ];
              // Add forecast Data to forecastArray
              forecastData += forecastArray.join("");
            }
          }
          // Display forecast data in forecastArea
          $(forecastArea).html(forecastData);
          $(searchCity).val("");
        });
    }
    // If the search field is empty...
    else {
      $(weatherArea).text("Search field can't be empty");
      $(forecastArea).text("Search field can't be empty");
    }
  });
  // function for showing the response data for the weather
  function show(response) {
    console.log("Showing Response: ", response);

    return response.city.name + "<h3> (" + response.list[0].dt_txt.split(' ')[0] + ") </h3>" +
      "<p class = 'lead'>Temp: " + response.list[0].main.temp + " degrees</p>" +
      "<p class = 'lead'>Humidity: " + response.list[0].main.humidity + " %</p>" +
      "<p class = 'lead'>Wind Speed: " + response.list[0].wind.speed + " mph</p>";
  };
  // Get searh history from local storage and display in cityList
  function showHistory() {
    let searchStorage = localStorage.getItem("searchHistory")
    $(cityList).append("<tr>").append("<td>" + searchStorage + "</td>")
  };

  showHistory();

  // Close of 'document.ready' function
});