how to access directory specific data from a template in that directory

[corderophi678]

Apologies if this is a dupe issue, I've been unable to find what I'm looking for here (closest thing seems to be #273) or in the docs (I would've expected it to be on the template and directory data files page. Alternatively, maybe I'm mistaken about the point or role of directory/template data files.

I've got an "About" page on a site I'm working on, built from the files in an about folder, in which there's an index.liquid file and an about.11tydata.js file, from which I export an array of items that I want to iterate through in the about/index.liquid file. How might I accomplish this? I was under the impression that having a data file in a template directory would expose the data to the template in that directory (and only that (or those) template(s)). But it's unclear, to me at least, how that data is exposed in the template.

Thanks, cheers, and ❤️

[zachleat]

What’s your about.11tydata.js file look like?

[corderophi678]

module.exports = [{ name: "potato" }, { name: "clambake" }];

[paulshryock]

Edit: 2019/02/09 (10:20 AM EST) /src/about/about.json has a typo. Array items should have double quotes instead of single quotes.

Edit: 2019/02/09 (10:55 AM EST) /src/about/index.liquid has a typo. Instead of accessing data with the slug first (i.e. {{ about.name }}), just use the object key directly (i.e. {{ name }}).

---

File structure:

/src
├─┬ /about
  ├── index.liquid
  ├── about.json

/src/about/about.json:

{
  "name": "Raymond Jones",
  "expertise": [
    {
      "name": "Front End Development",
      "skills": [ 'HTML', 'CSS', 'JavaScript' ]
    },
    {
      "name": "Web Design",
      "skills": [ 'Sketch', 'InDesign', 'Photoshop' ]
    }
  ]
}

/src/about/index.liquid:

<p>Hi, my name is {{ about.name }}!</p>
<p>My expertise:</p>
<ul>
  {% for expertise in about.expertise %}
    <li>{{ expertise.name }}</li>
  {% endfor %}
</ul>
<p>My skills:</p>
<ul>
  {% for expertise in about.expertise %}
    {% for skill in expertise.skills %}
      <li>{{ skill }}</li>
    {% endfor %}
  {% endfor %}
</ul>

Does that help?

[corderophi678]

Hey Paul, thanks for this. I've tried it with no luck, though. Might there be something I'm missing from my config or frontmatter?

[paulshryock]

no luck, though.

What specifically isn't working? Does the page get generated in your output folder? The dynamic values aren't there?

[paulshryock]

Sorry, I had a couple typos.

Here's the corrected code.

/src/about/about.json:

{
  "name": "Raymond Jones",
  "expertise": [
    {
      "name": "Front End Development",
      "skills": [ "HTML", "CSS", "JavaScript" ]
    },
    {
      "name": "Web Design",
      "skills": [ "Sketch", "InDesign", "Photoshop" ]
    }
  ]
}

/src/about/index.liquid:

---
title: About
slug: about
---
<p>Hi, my name is {{ name }}!</p>
<p>My expertise:</p>
<ul>
  {% for expertise in expertise %}
    <li>{{ expertise.name }}</li>
  {% endfor %}
</ul>
<p>My skills:</p>
<ul>
  {% for expertise in expertise %}
    {% for skill in expertise.skills %}
      <li>{{ skill }}</li>
    {% endfor %}
  {% endfor %}
</ul>

[paulshryock]

This is a working example of how to access directory specific data from a template in that directory when using Eleventy: https://github.com/paulshryock/eleventy-page-data

[corderophi678]

Ahh, so it's the slug frontmatter key that effectively "registers" the appropriate data file? Thanks for your help, Paul. I really appreciate it. Calling this issue closed.

[paulshryock]

so it's the slug frontmatter key that effectively "registers" the appropriate data file?

I hadn't mentally made that connection, but you could be right. I was thinking the files just need to be in the same directory. @zachleat, any insight on which it is?