尝试显示JSON对象中的值但仅显示一次时得到“未定义”-JavaScript

Question

我制作了一个简单的Web应用程序，以使用OMDB API显示信息，该网站最多获取100部电影作为搜索标签，并首先显示8部电影，如果单击showmore，它将显示92部电影。我得到一个奇怪的空格，上面写着“ undefined”（如图所示）。我认为该对象是未定义的，但不知道如何工作，它对于其他电影海报也能正常工作，它在搜索时显示8部电影，“未定义”时显示，并且在提取的列表中再次显示第9部电影。

var movie_poster = [];

function movie_list() {

  var search_var = document.getElementById("search").value;
  var card = "";
  var data = [];
  //fetch reults of 10 pages, 100 movies if available

  for (var i = 0; i <= 10; i++) {
    var url = 'http://www.omdbapi.com/?apikey=*******c&s=' + search_var + '&page=' + i;

    fetch(url).then(function(resp) {
        return resp.json();
      })
      .then(function(data) {

        //To handle "unidentified" and "null" type error
        try {
          var num = Object.keys(data.Search).length;
        } catch (e) {

          if (e instanceof TypeError) {
            var num = 0;
          }
        }

        for (var j = 0; j < num; j++) {
          movie_poster.push(data.Search[j]);
        }
        return movie_poster; //return movie_poster with the information
      });
  }

  num = Object.keys(movie_poster).length;

  //to display atmost 8 posters in the screen,
  if (num <= 8) {
    var num_less = num;
  } else {
    var num_less = 8;
  }

  //display upto 8 movies
  for (var j = 0; j < num_less; j++) {
    var poster_url = JSON.stringify(movie_poster[j].Poster).replace(/[""]/g, " ");
    var title = JSON.stringify(movie_poster[j].Title).replace(/[""]/g, " ");
    document.getElementById("search_for").innerHTML = "<br><h2 style='color: white; margin-left:20px;'>Search result for: " + search_var + " </h2><br>";
    var card = card + "<div class='card grid-item'><img alt='' onerror='this.onerror=null; this.src=`assets/no-image-found.jpg`' onclick='movie_modal(" + JSON.stringify(movie_poster[j]) + ")' class='poster_img' src='" + poster_url + "'><h3 class='poster_title'>" + title + "</h3></div>";
    document.getElementById("movies").innerHTML = card;
    window.location.href = "#movies";
  }

  //if > 8 movies, show showmore button and if clicked more movies, 90 more
  if (num > 8) {
    card2 = " ";
    var showmore = "<div class='showmore_btn' id='showmore_btn'>showmore</div>";
    document.getElementById("showmore").innerHTML = showmore;
    document.getElementById("showmore_btn").addEventListener("click", function() {
      document.getElementById("showmore_btn").style.display = "none";
      for (var j = 8; j < num; j++) {
        console.log(movie_poster);
        var poster_url = JSON.stringify(movie_poster[j].Poster).replace(/[""]/g, " ");
        var title = JSON.stringify(movie_poster[j].Title).replace(/[""]/g, " ");
        if (movie_poster[j] == "undefined") {
          document.getElementByClass("grid-item").style.display = "none";
          console.log("undefined detected");
        }
        var card2 = card2 + "<div class='card grid-item'><img alt='' onerror='this.onerror=null; this.src=`assets/no-image-found.jpg`' onclick='movie_modal(" + JSON.stringify(movie_poster[j]) + ")' class='poster_img' src='" + poster_url + "'><h3 class='poster_title'>" + title + "</h3></div>";
        document.getElementById("more_movies").innerHTML = card2;
      }
    });
  }
}