时间戳

首页 > 解决方案 > 在 forEach 循环后显示 HTML 时出现问题

javascript - 在 forEach 循环后显示 HTML 时出现问题

问题描述

希望有人可以帮忙。这个小项目的目标是搜索电影数据库 OMDB，并在搜索栏下方显示获取的结果。当我尝试对返回的结果使用 forEach 循环时，我感觉代码会中断，但我找不到错误。每一个帮助表示赞赏！谢谢！

var httpRequest = new XMLHttpRequest();

      httpRequest.onload = function() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
          if (httpRequest.status === 200) {
            var response = JSON.parse(httpRequest.responseText).Search;
            var body = document.getElementsByTagName("body");
            response.forEach(function (element, index) {
             body.appendChild(" <img src="+element[index].Poster+"/>" +
              "<p>Title: <a href = 'https://www.imdb.com/title/"+element[index].imdbID+"' >" +element[index].Title+ "</a></p>" +
              "<p>Year: "+ element[index].Year+"</p>" +
              "<p>Type: "+element[index].Type+"</p>");
          });



          } else {
            console.log(httpRequest.statusText);
          }
        }
      };


      httpRequest.onerror = function() {
        console.log(httpRequest.statusText);
      };


var searchMovie = function () {
  var input = document.querySelector('input').value;
  if (input) {  


          httpRequest.open('GET', 'https://www.omdbapi.com/?s=' + input + '&plot=short&apikey=b7da8d63');
          httpRequest.send(null);

}
};

标签： javascriptjsonapiforeach

解决方案

这是一个工作示例，假设您要返回一系列电影。

const response =  JSON.parse('{"Search":[{"Title":"The Town","Year":"2010","imdbID":"tt0840361","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTcyNzcxODg3Nl5BMl5BanBnXkFtZTcwMTUyNjQ3Mw@@._V1_SX300.jpg"},{"Title":"Ghost Town","Year":"2008","imdbID":"tt0995039","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTQyODQ4MzYxN15BMl5BanBnXkFtZTcwOTQ1MDczMw@@._V1_SX300.jpg"},{"Title":"Cougar Town","Year":"2009–2015","imdbID":"tt1441109","Type":"series","Poster":"https://m.media-amazon.com/images/M/MV5BMTQyMDI2MDM5NF5BMl5BanBnXkFtZTgwOTcyNDE5MDE@._V1_SX300.jpg"},{"Title":"New in Town","Year":"2009","imdbID":"tt1095174","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMzAxNzU4MDE1Nl5BMl5BanBnXkFtZTcwOTQ0NDcwMg@@._V1_SX300.jpg"},{"Title":"Mr. Deeds Goes to Town","Year":"1936","imdbID":"tt0027996","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNzdiMDVkNmMtNDI0Ny00MTQ5LWEwNjAtODQxOGNjOTZmMGVmL2ltYWdlXkEyXkFqcGdeQXVyMDI2NDg0NQ@@._V1_SX300.jpg"},{"Title":"On the Town","Year":"1949","imdbID":"tt0041716","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNjk0YmVlNTQtZDg0NC00MGYyLWFhYTMtMTBlMzFkYjczMDMyXkEyXkFqcGdeQXVyMDI2NDg0NQ@@._V1_SX300.jpg"},{"Title":"The Town That Dreaded Sundown","Year":"2014","imdbID":"tt2561546","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTUwNzUyNjEwM15BMl5BanBnXkFtZTgwOTk3MTc2MjE@._V1_SX300.jpg"}],"totalResults":"1588","Response":"True"}');

// Get the body, which is the first element in the array
//  returned by document.getElementsByTagName()
var body = document.getElementsByTagName("body")[0];
var movie;
response.Search.forEach(function (element) {
  // Create a new element to append
  movie = document.createElement('div');

  // Add HTML contents to new element
  movie.innerHTML = 
              "<img src="+element.Poster+"/>" +
              "<p>Title: <a href = 'https://www.imdb.com/title/"+element.imdbID+"' >"+element.Title+ "</a></p>" +
              "<p>Year: "+element.Year+"</p>" +
              "<p>Type: "+element.Type+"</p>";

   // Append new element
   body.appendChild(movie);
});
<html>
<head></head>
<body>
</body>
</html>

推荐阅读