Question

我制作了一个小型网页，要求用户输入演员的名字，希望能显示该演员出演的所有电影。对于我的问题，我已经硬编码了该演员的api URL。演员（布拉德利·库珀）。

我如何获取所有电影标题，发行年份，电影概述和电影海报价值，并将其全部显示在页面上？现在，我只能显示一部电影，并且出于某些奇怪的原因，这不是json文件中提到的第一部电影。

我认为我需要将json数据放入一个数组中，但是我不确定该怎么做，也不确定如何在页面上显示多个结果。

感谢您提供的任何帮助和指导。

<!DOCTYPE html>
<html>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onload="search_actor()">

<script>

  function search_actor() {

  $.getJSON({

    url: 'https://api.themoviedb.org/3/person/51329/movie_credits?api_key=f1d314280284e94ff7d1feeed7d44fdf',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {
        $(data.cast).each(function(index, moviedata) {

        // Movie Title
        document.getElementById("movietitle").innerHTML = moviedata.title;

        // Release Year
        document.getElementById("releaseyear").innerHTML = moviedata.release_date.substr(0, 4);

        // Movie Overview
        document.getElementById("movieoverview").innerHTML = moviedata.overview;

        // Movie Poster
        var fullmovieposterpath = '<img src=https://image.tmdb.org/t/p/w500/' + moviedata.poster_path + ' width="20%" height="20%">';
        document.getElementById("displaymovieposter").innerHTML = fullmovieposterpath;

        });
       }
     });
     }

</script>

<div id="movietitle"></div>
<div id="releaseyear"></div>
<div id="movieoverview"></div>
<div id="displaymovieposter"></div>
</body>
</html>

Answer 1

在您的代码中，只有一个容器可以显示电影项目，您需要循环响应并动态创建电影卡，还可以使用css网格系统来更好地控制电影卡及其位置。

$.getJSON({
  url: 'https://api.themoviedb.org/3/person/51329/movie_credits?api_key=f1d314280284e94ff7d1feeed7d44fdf',
  dataType: 'json',
  type: 'get',
  cache: false,
  success: function (data) {
    console.log(data)
    let k = '';
    data.cast.forEach(function (item) {
    //Using template literal to create a movie card
      k += `<div class='movie-card'>
              <div>${item.original_title}</div>
               <div><img src = 'https://image.tmdb.org/t/p/w500/${item.poster_path}'></div>
               <div><span>${item.release_date}</span></div>
               <div class='movie-desc'>${item.overview}</div>
              </div>`
    })
    $('.movie-conatiner').append(k)

  }
});

在stackblitz上查看完整的工作副本

Answer 2

当前，您正在按单格显示数据，因此数据将被覆盖。相反，您需要为每个语句动态建立除法，然后在主页中分配整个数据。

还在HTML部件中仅使用id =“ main”

创建一个div

下面是具有上述更改的更新代码。请为各部门提供适当的CSS。

获得json响应后的代码

divcnt = 1;

    divdata="";

    $(data.cast).each(function(index, moviedata) {          

         var fullmovieposterpath = '<img src=https://image.tmdb.org/t/p/w500/' + moviedata.poster_path + ' width="20%" height="20%">';

       divdata += '<div id="test'+ divcnt +'"><div id="movietitle'+ divcnt +'">'+moviedata.title+'</div><div id="releaseyear'+ divcnt +'">'+moviedata.release_date.substr(0, 4)+'</div><div id="movieoverview'+ divcnt +'">'+moviedata.overview+'</div><div id="displaymovieposter'+ divcnt +'">'+fullmovieposterpath+'</div></div>';

    });

      document.getElementById("main").innerHTML = divdata;

获取某些json值并显示在html页面上

2 个答案: