what does `post` and `data` contain? is "filename" available? #2284

ahillio · 2022-03-22T01:33:09Z

ahillio
Mar 22, 2022

I'd like to use the filename for each post in my template.

Something like {{ post.data.filename }} would be sweet. But I'm confused about inspecting the available data and don't know how to look for a filename...

I hoped the following would work but it doesn't...

{% assign posts = collections.how-are-you %}
{%- for post in posts -%}
<div>{{ post }}</div>
{%- endfor -%}

the following does work: (printing {{ post.data.title }} instead of {{ post }}

{% assign posts = collections.how-are-you %}
{%- for post in posts -%}
<div>{{ post.data.title }}</div>
{%- endfor -%}

but trying to print {{ post.data }}:

{% assign posts = collections.how-are-you %}
{%- for post in posts -%}
<div>{{ post.data }}</div>
{%- endfor -%}

does not work.

Trying to print {{ post }} or {{ post.data }} results in UsingCircularTemplateContentReferenceError.

My questions:

How do I see what kind of data is available for use in my templates?
Is filename among that data?

Answered by pdehaan

Mar 22, 2022

Buckle up, it's about to get educational up in here!

First let's walk through the output of your attempts so far and see if we have roughly the same results. You said the first attempt "didn't work", but never mentioned what the output was.
I tried my best to recreate your example locally so hopefully our code is somewhat close:

<h2>OPTION 1</h2>
{% assign posts = collections.how-are-you %}
{%- for post in posts -%}
<div>{{ post }}</div>
{%- endfor -%}

When I run this, I get the following:

<h2>OPTION 1</h2>
<div>[object Object]</div>
<div>[object Object]</div>
<div>[object Object]</div>
<div>[object Object]</div>

That is also the same output I see if I try logging {{ post.data }}:

<h2>OPT…

View full answer

pdehaan · 2022-03-22T04:27:13Z

pdehaan
Mar 22, 2022
Collaborator

Buckle up, it's about to get educational up in here!

First let's walk through the output of your attempts so far and see if we have roughly the same results. You said the first attempt "didn't work", but never mentioned what the output was.
I tried my best to recreate your example locally so hopefully our code is somewhat close:

<h2>OPTION 1</h2>
{% assign posts = collections.how-are-you %}
{%- for post in posts -%}
<div>{{ post }}</div>
{%- endfor -%}

When I run this, I get the following:

<h2>OPTION 1</h2>
<div>[object Object]</div>
<div>[object Object]</div>
<div>[object Object]</div>
<div>[object Object]</div>

That is also the same output I see if I try logging {{ post.data }}:

<h2>OPTION 2</h2>
<div>[object Object]</div>
<div>[object Object]</div>
<div>[object Object]</div>
<div>[object Object]</div>

You mentioned using {{ post.data.title }} worked, which is the case for me too:

<h2>OPTION 3</h2>
{% assign posts = collections.how-are-you %}
{%- for post in posts -%}
<div>{{ post.data.title }}</div>
{%- endfor -%}

<h2>OPTION 3</h2>
<div>FOUR</div>
<div>ONE</div>
<div>THREE</div>
<div>TWO</div>

Where my ./src/how-are-you/one.liquid file looks something like this:

---
title: ONE
---

<h1>{{ title }}</h1>

So I think by now we know our collection is there, has the expected items/count, we just don't know what post or post.data objects include.

We can try using Liquid's excellent "json" filter to output those objects as JSON:

 {%- for post in posts -%}
-  <div>{{ post }}</div>
+  <div>{{ post | json }}</div>
 {%- endfor -%}

Now we should see something roughly close to the following:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] > Having trouble rendering liquid template ./src/how-are-you/index.liquid

`TemplateContentRenderError` was thrown
[11ty] > Converting circular structure to JSON
    --> starting at object with constructor 'Liquid'
    |     property 'parser' -> object with constructor 'Parser'
    --- property 'liquid' closes the circle, file:./src/how-are-you/index.liquid, line:9, col:6

`RenderError` was thrown
[11ty] > Converting circular structure to JSON
    --> starting at object with constructor 'Liquid'
    |     property 'parser' -> object with constructor 'Parser'
    --- property 'liquid' closes the circle

`TypeError` was thrown:
[11ty]     TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Liquid'
        |     property 'parser' -> object with constructor 'Parser'
        --- property 'liquid' closes the circle
        at JSON.stringify (<anonymous>)
        at Object.json (/Volumes/Dev/github/11ty/11ty-2284/node_modules/liquidjs/dist/liquid.node.cjs.js:2938:17)
        at Filter.render (/Volumes/Dev/github/11ty/11ty-2284/node_modules/liquidjs/dist/liquid.node.cjs.js:2419:26)
        at Value.<anonymous> (/Volumes/Dev/github/11ty/11ty-2284/node_modules/liquidjs/dist/liquid.node.cjs.js:2455:49)
        at step (/Volumes/Dev/github/11ty/11ty-2284/node_modules/liquidjs/dist/liquid.node.cjs.js:87:23)
        at Object.next (/Volumes/Dev/github/11ty/11ty-2284/node_modules/liquidjs/dist/liquid.node.cjs.js:68:53)
        at reduce (/Volumes/Dev/github/11ty/11ty-2284/node_modules/liquidjs/dist/liquid.node.cjs.js:1058:25)
        at Object.then (/Volumes/Dev/github/11ty/11ty-2284/node_modules/liquidjs/dist/liquid.node.cjs.js:1026:43)
        at reduce (/Volumes/Dev/github/11ty/11ty-2284/node_modules/liquidjs/dist/liquid.node.cjs.js:1065:40)
        at toThenable (/Volumes/Dev/github/11ty/11ty-2284/node_modules/liquidjs/dist/liquid.node.cjs.js:1053:16)
[11ty] Wrote 0 files in 0.03 seconds (v1.0.0)

OK, so we still don't know what {{ post }} is, but we know it's circular somehow. This brings us to my favorite little debugging filter, using Node's util.inspect():

// .eleventy.js
const inspect = require("node:util").inspect;

module.exports = function (eleventyConfig) {
  eleventyConfig.addFilter("inspect", function (obj = {}) {
    return inspect(obj, {sorted: true});
  });

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

And now we can use our custom | inspect filter in our page.

<h2>OPTION 4</h2>
{% assign posts = collections.how-are-you %}
{%- for post in posts -%}
<div>{{ post.data | inspect }}</div>
{%- endfor -%}

This will be a bit more verbose:

<h2>OPTION 4</h2>
<div>{
  collections: {
    'how-are-you': [ [Object], [Object], [Object], [Object] ],
    all: [ [Object], [Object], [Object], [Object] ]
  },
  eleventy: {
    env: {
      config: '/Volumes/Dev/github/11ty/11ty-2284/.eleventy.js',
      root: '/Volumes/Dev/github/11ty/11ty-2284',
      source: 'cli'
    }
  },
  page: {
    date: 2022-03-22T02:43:26.784Z,
    filePathStem: '/how-are-you/four',
    fileSlug: 'four',
    inputPath: './src/how-are-you/four.liquid',
    outputFileExtension: 'html',
    outputPath: 'www/how-are-you/four/index.html',
    url: '/how-are-you/four/'
  },
  pkg: {
    author: 'Peter deHaan <peter@deseloper.com>',
    description: '',
    devDependencies: { '@11ty/eleventy': '^1.0.0' },
    keywords: [],
    license: 'MPL-2.0',
    main: '.eleventy.js',
    name: '11ty-2284',
    scripts: {
      build: 'eleventy',
      test: 'echo "Error: no test specified" && exit 1'
    },
    version: '1.0.0'
  },
  tags: [ 'how-are-you' ],
  title: 'FOUR'
}</div>
<div>...</div>
<div>...</div>
<div>...</div>

It's pretty messy there, but we can see there is a {{ post.data.title }} ("FOUR"), and {{ post.data.tags }} (["how-are-you"]), and {{ post.data.pkg }} which is my local package.json file. Or you probably want {{ post.data.page }} which is an object with the following:

date: 2022-03-22T02:43:26.784Z,
filePathStem: '/how-are-you/four',
fileSlug: 'four',
inputPath: './src/how-are-you/four.liquid',
outputFileExtension: 'html',
outputPath: 'www/how-are-you/four/index.html',
url: '/how-are-you/four/'

(Also see https://www.11ty.dev/docs/data-eleventy-supplied/ for more detailed explanations of most of these.)

Or if we log out the {{ post | inspect }} we see a bit more data (although most if it we really probably don't want to use directly):

<div>{
  checkTemplateContent: true,
  data: {
    collections: { 'how-are-you': [Array], all: [Array] },
    eleventy: { env: [Object] },
    page: {
      date: 2022-03-22T02:43:26.784Z,
      filePathStem: '/how-are-you/four',
      fileSlug: 'four',
      inputPath: './src/how-are-you/four.liquid',
      outputFileExtension: 'html',
      outputPath: 'www/how-are-you/four/index.html',
      url: '/how-are-you/four/'
    },
    pkg: {
      author: 'Peter deHaan <peter@deseloper.com>',
      description: '',
      devDependencies: [Object],
      keywords: [],
      license: 'MPL-2.0',
      main: '.eleventy.js',
      name: '11ty-2284',
      scripts: [Object],
      version: '1.0.0'
    },
    tags: [ 'how-are-you' ],
    title: 'FOUR'
  },
  date: 2022-03-22T02:43:26.784Z,
  filePathStem: '/how-are-you/four',
  fileSlug: 'four',
  inputPath: './src/how-are-you/four.liquid',
  outputPath: 'www/how-are-you/four/index.html',
  template: Template {
    behavior: TemplateBehavior {
      config: [Object],
      outputFormat: 'fs',
      render: true,
      write: true
    },
    computedData: ComputedData {
      computed: {},
      computedKeys: Set(0) {},
      config: [Object],
      declaredDependencies: {},
      queue: [ComputedDataQueue],
      symbolParseFunctions: {},
      templateStringKeyLookup: {}
    },
    dataCache: {
      eleventy: [Object],
      page: [Object],
      pkg: [Object],
      tags: [Array],
      title: 'FOUR'
    },
    extraOutputSubdirectory: '',
    filePathStem: '/how-are-you/four',
    fileSlug: TemplateFileSlug {
      cleanInputPath: 'how-are-you/four.liquid',
      dirs: [Array],
      filenameNoExt: 'four',
      inputPath: 'how-are-you/four.liquid',
      parsed: [Object]
    },
    fileSlugStr: 'four',
    frontMatter: {
      content: '\n<h1>{{ title }}</h1>\n',
      data: [Object],
      excerpt: '',
      isEmpty: false
    },
    inputContent: '---\ntitle: FOUR\n---\n\n<h1>{{ title }}</h1>\n',
    inputDir: 'src',
    inputPath: './src/how-are-you/four.liquid',
    isDryRun: false,
    isVerbose: true,
    linters: [],
    outputDir: 'www',
    outputFormat: 'fs',
    paginationData: {},
    parsed: {
      base: 'four.liquid',
      dir: './src/how-are-you',
      ext: '.liquid',
      name: 'four',
      root: ''
    },
    plugins: {},
    serverlessUrls: null,
    skippedCount: 0,
    templateData: TemplateData {
      config: [Object],
      configApiGlobalData: [Object],
      dataDir: 'src/_data',
      dataTemplateEngine: false,
      eleventyConfig: [TemplateConfig],
      globalData: [Object],
      inputDir: 'src',
      inputDirNeedsCheck: true,
      pathCache: [],
      rawImports: [Object],
      templateDirectoryData: [Object]
    },
    transforms: [],
    wrapWithLayouts: true,
    writeCount: 0
  },
  templateContent: [Getter/Setter],
  url: '/how-are-you/four/'
}</div>

5 replies

pdehaan Mar 22, 2022
Collaborator

<h2>OPTION 4</h2>
{% assign posts = collections.how-are-you %}
{%- for post in posts -%}
{% comment %} <div>{{ post | inspect }}</div> {% endcomment %}
{{ post.inputPath }} -- {{ post.outputPath }} -- {{ post.url }} -- {{ post.data.title }}<br/>
{%- endfor -%}

OUTPUT

./src/how-are-you/four.liquid -- www/how-are-you/four/index.html -- /how-are-you/four/ -- FOUR<br/>
./src/how-are-you/one.liquid -- www/how-are-you/one/index.html -- /how-are-you/one/ -- ONE<br/>
./src/how-are-you/three.liquid -- www/how-are-you/three/index.html -- /how-are-you/three/ -- THREE<br/>
./src/how-are-you/two.liquid -- www/how-are-you/two/index.html -- /how-are-you/two/ -- TWO<br/>

ahillio Mar 23, 2022
Author

Thanks so much! The post.data.page.fileSlug was exactly what I was looking for. But I couldn't get either {{ post | json }} or {{ post | inspect }} to work, I'll have to look into those more.

What's this node:util module? I was getting errors about it being unavailable but I didn't know how to install it. (neither npm install util or npm install node:util worked, and the futility of that is probably obvious to you, but "node:util" is a difficult websearch to get helpful results for.

pdehaan Mar 23, 2022
Collaborator

util is a built-in Node module (like fs or path). No installation needed. In fact, if you do run npm install util who knows what random code you'll get (assuming npm allowed somebody to publish a module with the same name as a core module, which I think they curiously have in the past). So you can do require("util") or newer versions of Node let you prefix that with node: to indicate that it's the built-in module.
Per https://nodejs.org/api/modules.html#core-modules:

Core modules can also be identified using the node: prefix, in which case it bypasses the require cache. For instance, require('node:http') will always return the built in HTTP module, even if there is require.cache entry by that name.

Looks like the node: prefix is only available in Node 14.18.0+ and Node 16.0.0+, so your milage may vary depending on which version you're using (current LTS build is 16.14.2, but I think Eleventy 1.0 supports Node 12+).
Re: {{ post | json }} that won't work in this case since {{ post }} has a circular reference which will cause Node to panic.
Re: {{ post | inspect }} that will only work if you create a custom filter named inspect which can correctly stringify an object w/ circular references. I like the util.inspect() API for that, but there are probably other methods/packages which can handle that too.

ahillio Mar 23, 2022
Author

Thank you <3

pdehaan Mar 23, 2022
Collaborator

The post.data.page.fileSlug was exactly what I was looking for.

You may also be able to use {{ post.fileSlug }} directly (I haven't tried it locally, but it looks like it is in the big-ol JSON blob above). 🤷

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

what does `post` and `data` contain? is "filename" available? #2284

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

what does post and data contain? is "filename" available? #2284

ahillio Mar 22, 2022

Replies: 1 comment · 5 replies

pdehaan Mar 22, 2022 Collaborator

pdehaan Mar 22, 2022 Collaborator

OUTPUT

ahillio Mar 23, 2022 Author

pdehaan Mar 23, 2022 Collaborator

ahillio Mar 23, 2022 Author

pdehaan Mar 23, 2022 Collaborator

what does `post` and `data` contain? is "filename" available? #2284

ahillio
Mar 22, 2022

Replies: 1 comment 5 replies

pdehaan
Mar 22, 2022
Collaborator

pdehaan Mar 22, 2022
Collaborator

ahillio Mar 23, 2022
Author

pdehaan Mar 23, 2022
Collaborator

ahillio Mar 23, 2022
Author

pdehaan Mar 23, 2022
Collaborator