Unable to loop through array when using 'eleventy-cache-assets'

Question

In eleventy, I'm using the 'eleventy-cache-assets' utility to retrieve API data from TMDB and place it in a cache. The JSON is successfully retrieved and stored in the cache. I can also use the Nunjucks dump filter to dump the full JSON to a page. However, I cannot run a for loop over the JSON content. It's behaving as if the data does not exist. I'm likely making a schoolboy error here but I can't see it.

Here's the JS that retrieves the data (successfully).

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,
    };
  }
};

Here is how I'm trying to loop through the content. The else condition is returning. When I remove the else condition, nothing is returned (just the empty ul). If I've targeted the node incorrectly, I should have x number of empty li tags, but I don't.

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

Answer 1

The issue is likely just that you're wrapping the result from the API in an additional object, and eleventy adds an additional wrapper based on the file name of the data file, so you need to modify the way you access the results.

According to the TMDB documentation, the API will return something like this (JSON-encoded):

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

Then you're wrapping that result in another object:

return {
  films: json,
};

Finally, eleventy makes that data available to templates under a variable name based on the name of your data file — i.e. the file contains your API call. You didn't mention the name of the file, let's assume it lives in your data directory as tmdb.js. That means the variable accessible to your template will look something like this:

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

See the documentation on how eleventy parses data files for more information.

This means you can access the results in this way:

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

Note also that your original code used {{ results.title }} which isn't defined in your scope, I changed that to use the loop variable film. Also, adjust the tmdb variable to the name of your data file.

I would also recommend not wrapping the response of the API in an additional object (the key films also implies it's a list of films, not the complete API response). It doesn't really add anything and only increases complexity.