## What about using data?

We can put JSON or JavaScript that creates JSON in a `_data` folder, and then simply refer to it in our templates.

Here's an example of building a course list based on data as well as a separate HTML page for each course!

### Courses Data (courses.json)

    {
        "courses": [
          {
            "code": "CSCI E-1B",
            "title": "Computer Science for Business Professionals",
            "crn": "25393",
            "term": "Spring 2023",
            "catalog_url": "https://courses.dce.harvard.edu/?details&srcdb=202302&crn=25393",
            "meets": "On Demand",
            "instr": "David J. Malan"
          },
          {
            "code": "CSCI E-7",
            "title": "Introduction to Computer Science with Python",
            "crn": "25531",
            "term": "Spring 2023",
            "catalog_url": "https://courses.dce.harvard.edu/?details&srcdb=202302&crn=25531",
            "meets": "On Demand",
            "instr": "Henry H. Leitner"
          },...]}

### Template to produce one HTML file per course item

    ---
    pagination:
        data: courses.courses
        size: 1
        alias: course
    permalink: "courses/{{ course.crn | slug }}/"
    layout: template.html
    eleventyComputed:
        title: "{{ course.code }}"
    ---
    <nav>
      <a href="/">Return to course listing</a>
    </nav>
    <div class="course single">
      <h3>{{ course.code }}<br/>{{ course.title }}</h3>
      <ul>
        <li>Term: {{ course.term }}
        </li>
        <li>CRN: {{ course.crn }}
        </li>
        <li>Meets: {{ course.meets }}
        </li>
        <li>Instructor: {{ course.instr }}</li>
        <li>
          <a href="{{ course.catalog_url }}">{{ course.code }} catalog entry</a>
        </li>
      </ul>
      <p>{{ course.description }}</p>
    </div>

See `courses_11ty` project.