0

在十一,我正在使用“十一缓存资产”实用程序从 TMDB 检索 API 数据并将其放入缓存中。JSON 被成功检索并存储在缓存中。我还可以使用 Nunjucks 转储过滤器将完整的 JSON 转储到页面。但是,我无法对 JSON 内容运行 for 循环。它的行为就好像数据不存在一样。我可能在这里犯了一个小学生错误,但我看不到。

这是检索数据的JS(成功)。

module.exports = async function () {
  try {
    // Grabs either the fresh remote data or cached data (will always be fresh live)
    let json = await Cache(
      `https://api.themoviedb.org/3/movie/upcoming?api_key=${TOKEN}&language=en-GB&region=GB`,
      {
        duration: "1d", // 1 day
        type: "json",
      }
    );

    return {
      films: json,
    };
  } catch (e) {
    return {
      films: 0,
    };
  }
};

这是我试图循环内容的方式。else 条件正在返回。当我删除 else 条件时,没有返回任何内容(只是空的 ul)。如果我错误地定位了节点,我应该有 x 个空 li 标签,但我没有。

<ul>    
    {% for film in films %}
        <li>{{ results.title }}</li>
    {% else %}
        <li>This displays if the 'films' collection were empty</li>
    {% endfor %}
</ul>
4

1 回答 1

0

问题很可能只是您将 API 的结果包装在一个额外的对象中,而十一时根据数据文件的文件名添加了一个额外的包装器,因此您需要修改访问结果的方式。

根据TMDB 文档,API 将返回如下内容(JSON 编码):

const json = {
    page: 1,
    results: [
        {/** ... */},
        {/** ... */},
        {/** ... */},
    ]
}

然后你将结果包装在另一个对象中:

return {
  films: json,
};

最后,十一使这些数据可用于基于您的数据文件名称的变量名称下的模板 - 即该文件包含您的 API 调用。您没有提到文件的名称,我们假设tmdb.js. 这意味着您的模板可访问的变量将如下所示:

const tmdb = {
    films: {
        page: 1,
        results: [
            {/** ... */},
            {/** ... */},
            {/** ... */},
        ]
    }
}

有关详细信息,请参阅有关十一月如何解析数据文件的文档。

这意味着您可以通过以下方式访问结果:

<ul>    
    {% for film in tmdb.films.results %}
        <li>{{ film.title }}</li>
    {% else %}
        <li>This displays if the 'films' collection were empty</li>
    {% endfor %}
</ul>

另请注意,您使用的原始代码{{ results.title }}未在您的范围内定义,我将其更改为使用循环变量film。此外,将tmdb变量调整为数据文件的名称。

我还建议不要将 API 的响应包装在附加对象中(密钥films还暗示它是电影列表,而不是完整的 API 响应)。它并没有真正增加任何东西,只会增加复杂性。

于 2020-12-14T11:16:21.730 回答