时间戳

首页 > 解决方案 > 获取某些json值并显示在html页面上

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

问题描述

我制作了一个小网页，要求用户输入演员的姓名，然后我希望显示该演员出演过的所有电影。对于我的问题，我已经硬编码了演员的 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>

标签： javascriptjson

解决方案

在您的代码中，您只有一个容器来显示电影项目。您需要循环响应并动态创建电影卡。还使用 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上查看完整的工作副本

推荐阅读