javascript - 如何将 OMDb API 的结果划分到表中？

Question

我目前正在与 OMDb API 合作并设法从中获取一些数据。现在我正在按标题和发行年份搜索电影数据库，并且能够将 Actor 放在一个“ block ”中。

这是我面临的两个问题:

1. 如何将所有 Actor 划分到各自的表格行？
2. 是否可以限制仅搜索电视剧并将“年份”替换为“季节”左右？

我的JavaScript运行:

$(function(){
  var $Search = $('form'), $Results = $('#results');
  $Results.hide();

  $Search.on('submit', function(p_oEvent){
    var sUrl, sMovie, sYear, oData;
    p_oEvent.preventDefault();
    sMovie = $Search.find('#title').val();
    sYear = $Search.find('#year').val();
    sUrl = encodeURI('http://www.omdbapi.com/?t=' + sMovie + '&y=' + sYear +     '');

    $.ajax(sUrl, {
      complete: function(p_oXHR, p_sStatus){
        oData = $.parseJSON(p_oXHR.responseText);
        console.log(oData);
        $Results.find('.actors').text(oData.Actors);
        $Results.show();
      }
    });
  });
});

我的 HTML 全部打印出来:

<div id="browse">
  <h1>Search for a TV-Series</h1>
  <form>
    <label>
        <input id="title" type="text" name="series" placeholder="Name of the Series" />
        <input id="year" type="text" name="year" placeholder="Year" />
    </label>
    <button>Go!</button>
  </form>
</div>

<div id="results">
  <table>
    <tr class="heading">
      <th>Actors</th>
    </tr>
    <tr>
      <td class="actors"></td>
    </tr>
  </table>
</div>

欢迎任何帮助和建议!

Answer 1

要在各自的行上显示每个参与者，您需要拆分 API 返回的参与者的逗号分隔字符串，迭代列表，并将每个参与者附加到页面。这是jsfiddle 。

HTML

<div id="browse">
  <h1>Search for a TV-Series</h1>
  <form>
    <label>
        <input id="title" type="text" name="series" placeholder="Name of the Series" />
        <input id="year" type="text" name="year" placeholder="Year" />
    </label>
    <button>Go!</button>
  </form>
</div>
<div id="results">
  <table></table>
</div>

JavaScript

$(function(){
  var $Search = $('form'), $Table = $('table');
  $Table.hide();

  $Search.on('submit', function(p_oEvent){
    var actors = [], sUrl, sMovie, sYear, oData;
    p_oEvent.preventDefault();
    sMovie = $Search.find('#title').val();
    sYear = $Search.find('#year').val();
    sUrl = encodeURI('https://www.omdbapi.com/?t=' + sMovie + '&y=' + sYear +     '');

    $.ajax(sUrl, {
      complete: function(p_oXHR, p_sStatus){
        oData = $.parseJSON(p_oXHR.responseText);
        actors = oData.Actors.split(',');

        $Table.html(
           '<tr class="heading"><th>Actors</th></tr>'
        );
        actors.forEach(function(actor) {
            $Table.append(
               '<tr><td class="actors">' + actor + '</td</tr>'      
            );
        });
        $Table.show();
      }
    });
  });
});

回答你的第二个问题，是的，可以仅按季节和电视剧进行搜索。下面是一个示例。

http://www.omdbapi.com/?t=Game%20of%20Thrones&Season=2&Episode=1&type=series

此 API 调用的问题是您必须按剧集 进行搜索，我想您可能想了解整个季节中的每个 Angular 色。为此，您必须在不使用 Episode 参数的情况下进行 API 调用，然后使用返回的 id 来检索每个剧集。