TVMAZE :不能按季jQuery、AJAX、WordPress分割剧集

Question

我在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>');


  });
  })

P.s.：+myscripts_vars.url1+ --由于wp_localize_script，我传递了这个变量

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

• 标题“日期”第一季
• 标题“日期”第一季
• 标题“日期”第一季
• 标题“日期”第一季
• 标题“日期”第一季
• N标题“日期”第二季
• N标题“日期”第二季
• N标题“日期”第二季
• N标题“日期”第二季
• N标题“日期”第二季

然而，我的目标是按季节来划分这个剧集列表。我不知道如何做到这一点，这要归功于jQuery或者通过API。

我所需要的就是得到这样的桌子：

第一季

• N标题AirDate

第二季

• N标题AirDate

第N季

• N标题AirDate

P.p.s:理想情况下，我想使用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);
});

});

谢谢大家的帮助！

Answer 1

通过使用多个端点并创建自己的时差图来实现这一点。

• /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稍后或异步地在“约简”中创建一个手风琴。下面是插入我第一个前妻的相同代码：

​

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>

​