使用‘eleventy cache-assets’时，无法循环访问数组

Question

在eleventy中，我使用了‘eleventy cache -assets’实用程序从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>

Answer 1

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

根据TMDB documentation，API将返回类似如下的内容(JSON编码)：

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

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

return {
  films: json,
};

最后，eleventy根据你的数据文件名在一个变量名下让这些数据对模板可用--也就是说，这个文件包含了你的API调用。您没有提到文件的名称，我们假设它以tmdb.js的形式存在于您的data directory中。这意味着您的模板可访问的变量将如下所示：

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

有关详细信息，请参阅有关如何使用eleventy parses data files的文档。

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

<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响应)。它不会增加任何东西，只会增加复杂性。