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

【问题标题】：Get certain json values and displaying on html page获取某些json值并显示在html页面上
【发布时间】：2019-03-24 22:07:25
【问题描述】：

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

【问题讨论】：

我想您正在播放最后部电影，而不是第一部电影。您只是循环遍历结果并将元素设置为当前迭代，因此您看到的结果只是它设置为最后的结果 - 循环的最后一次迭代。您需要为每个结果创建 new 元素，而不是重复更改相同的元素。此外，您还有两个 <body> 标签。
@TylerRoper 很好，为什么不回答这个问题？
因为我没有解决问题，所以我只是向 OP 推动了正确的方向。我不相信这个问题值得回答，因为it 有been 被问过many 次already。

标签： javascript json

【解决方案1】：

目前，您以单格显示数据，因此数据被覆盖。相反，您需要为每个语句动态构建划分，然后在主页中分配整个数据。

同时在 id="main" 的 html 部分中只创建单个 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;

【讨论】：

我试过你的代码，但我得到一个错误：divcnt is not defined.

【解决方案2】：

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

【讨论】：

这是写到哪个 div 的？此外，您的 stackblitz 链接并未指向您提到的示例。
@Pismo 请检查链接
效果很好！！我正在考虑使用模板文字，但不知道从哪里开始。非常感谢您的帮助！
如果 json 返回这个怎么办：{"page":1,"total_results":0,"total_pages":1,"results":[]} 我如何告诉用户类似“不是成立”？如果 json 确实返回搜索结果，那么我该如何运行您共享的解决方案？我必须做一个 if/else 声明吗？语法是什么样的？