时间戳

首页 > 解决方案 > TVMAZE API：无法按季 jQuery、AJAX、WordPress 分割剧集

jquery - TVMAZE API：无法按季 jQuery、AJAX、WordPress 分割剧集

问题描述

我对 JSON 以及 API 的使用非常陌生。由于 AJAX 查询，我设法从 TVMAZE 获取数据。顺便说一句，我使用 WordPress。

我以这种方式抓住了剧集：

 jQuery(document).ready(function($) {

  var settings = {
    "async": true,
    "crossDomain": true,
    "url": ""+myscripts_vars.url1+"", 
    "method": "GET",
    "headers": {},
    "data": "{}"
  }

  $('.some-button').click(function() {
  $.ajax(settings)
   .done(function(data){
     $.each(data, function (i, value) { 
     $('.episodelist').append('<tr><td id="episode_n">' + value.number + 
  '</td><td id="episode_name">' + value.name + '</td><td 
  id="episode_air_date">' + value.airdate + '</td><td 
  id="episode_season">' + value.season + '</td></tr>');


  });
  })

Ps: +myscripts_vars.url1+ -- 感谢 wp_localize_script 我转移了这个变量

但是，结果，我有一个由 4 行组成的列表：

但是，我的目标是按季节拆分此剧集列表。由于jQuery或API，我无法弄清楚如何做到这一点。

我所需要的只是得到这样的表：

第1季

第2季

第 N 季

Pps：理想情况下，我想对所有这些数据使用 jQuery 手风琴。

所以，我的问题如下：

  1. 我需要如何正确抓取剧集（如果我犯了一些错误）？
  2. 通过 wp_localize_script 在我的 PHP 代码和 AJAX 之间传输变量是个好主意吗？
  3. 有没有办法进行正确的 API 查询，以便在“API 端”按季节划分我的剧集？
  4. 有什么方法可以发出 POST 请求而不是 GET 请求吗？
  5. 理想情况下，我希望看到按季节划分的所有剧集的 jQuery 手风琴。因此，如果有人可以帮助我，我将不胜感激。

要查看 JSON 响应，请使用以下代码：

jQuery(document).ready(function($) {

var settings = {
"async": true,
"crossDomain": true,
"url": "https://api.tvmaze.com/seasons/6/episodes",
"method": "GET",
"headers": {},
"data": "{}"
}

$.ajax(settings).done(function (response) {
console.log(response);
});

});

谢谢大家的帮助！！！

标签： jqueryjsonajaxwordpressapi

解决方案

您可以通过使用多个端点并创建自己的剧集季节地图来做到这一点。

  • /shows/:id/seasons使用节目 ID 获取该节目的季节，这将返回季节列表及其季节 ID

  • /seasons/:id/episodes使用季节 id 获取一个季节的剧集，这将返回一个季节的剧集列表

一旦你有了这个，你就可以创建一个这种类型的 seasonsMap{seasonNumber: [seasonEpisodes]}或任何其他可以帮助你将剧集与季节相关联的结构。

使用 seasonsMap 您可以对其进行迭代并创建 jquery 手风琴所需的模板

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

这是我如何做到的一个例子希望这会有所帮助

jQuery(document).ready(function($) {

  // helper functions to query api.tvmaze
  async function getSeasons(showId) {
    return await $.get(`https://api.tvmaze.com/shows/${showId}/seasons`);
  }

  async function getEpisodesForSeason(seasonId) {
    return await $.get(`https://api.tvmaze.com/seasons/${seasonId}/episodes`);
  }

  // helper function to group seasons to episodes for given show using show's id
  async function createSeasonsMap(showId) {

    const seasons = await getSeasons(showId);

    const seasonsMap = await seasons.reduce(async function(acc, season) {
      const _acc = await acc;
      const episodes = await getEpisodesForSeason(season.id);
      _acc[`season-${season.number}`] = episodes;
      return _acc;
    }, {});

    return seasonsMap;
  }

  // helper function to create html template required by jquery accordian
  function createAccordianElement($el, title, content) {

    // create accordian header
    const $header = $(`<h3> ${title} </h3>`);
    const $content = $("<div></div>");

    // create list items
    const $ul = $("<ul></ul>");
    $ul.append(content.map(x => $(`<li> ${x.name} </li>`)));

    // add to accordian 
    $content.append($ul);
    $el.append($header);
    $el.append($content);

  }

  // creates accordian ui for show 1 
  const seasons = createSeasonsMap(1).then(function(seasonsMap) {
    const $accordion = $("#accordion");
    $accordion.empty(); // clear 

    Object.keys(seasonsMap).forEach(function(season) {
      createAccordianElement($accordion, season, seasonsMap[season]);
    });
    
    $accordion.accordion();
  });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="accordion">
</div>

发出一个请求并使用每个剧集对象都有它所属的季节这一事实来创建一个 seasonsMap

async function getEpisodes(showId) {
  return await $.get(`https://api.tvmaze.com/shows/${showId}/episodes`);
}

async function createSeasonsMap(showId) {

  const episodes = await getEpisodes(showId);

  const seasonsMap = await episodes.reduce(async function(acc, episode) {
    const _acc = await acc;
    if (_acc[`season-${episode.season}`] == null) {
      _acc[`season-${episode.season}`] = [];
    }
    _acc[`season-${episode.season}`].push(episode);
    return _acc;
  }, {});

  return seasonsMap;
}

createSeasonsMap(1).then(console.log)
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

然后您可以使用 seasonsMap 稍后或在 reduce 中异步创建手风琴。这是插入到我的第一个 ex 中的相同代码：

jQuery(document).ready(function($) {

  // helper functions to query api.tvmaze
  async function getSeasons(showId) {
    return await $.get(`https://api.tvmaze.com/shows/${showId}/seasons`);
  }

  async function getEpisodesForSeason(seasonId) {
    return await $.get(`https://api.tvmaze.com/seasons/${seasonId}/episodes`);
  }

  async function getEpisodes(showId){
  	return await $.get(`https://api.tvmaze.com/shows/${showId}/episodes`);
  }
  // helper function to group seasons to episodes for given show using show's id
  async function createSeasonsMap(showId) {

    const episodes = await getEpisodes(showId);

    const seasonsMap = await episodes.reduce(async function(acc, episode) {
      const _acc = await acc;
      if(_acc[`season-${episode.season}`] == null){
      	_acc[`season-${episode.season}`] = [];
      }
      _acc[`season-${episode.season}`].push(episode);
      return _acc;
    }, {});

    return seasonsMap;
  }

  // helper function to create html template required by jquery accordian
  function createAccordianElement($el, title, content) {

    // create accordian header
    const $header = $(`<h3> ${title} </h3>`);
    const $content = $("<div></div>");

    // create list items
    const $ul = $("<ul></ul>");
    $ul.append(content.map(x => $(`<li> ${x.name} </li>`)));

    // add to accordian 
    $content.append($ul);
    $el.append($header);
    $el.append($content);

  }

  // creates accordian ui for show 1 
  const seasons = createSeasonsMap(1).then(function(seasonsMap) {
    const $accordion = $("#accordion");
    $accordion.empty(); // clear 
    Object.keys(seasonsMap).forEach(function(season) {
      createAccordianElement($accordion, season, seasonsMap[season]);
    });
    $accordion.accordion();
  });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="accordion">
</div>

推荐阅读