StaticData

The StaticData CPart is useful for loading JSON files to use as a data source. StaticData has no "refresh" capability, meaning this should only consist data that you do not expect to change while running your program, such as type definitions or data from a API that does not change frequently.

Usage

The StaticData CPart can be used in two different ways. The most common is loading data from a JSON file or JSON API by specifying a -src= attribute. During development, this will "fetch" when refreshing the page, but once you "build" the component, the specified content will be "frozen in time" during the build, and bundled in with the resulting JS file with any filtering applied.

The other usage is to simply "hardcode" the data in JSON syntax within the element itself. There is no functional difference of including data in JSON syntax in a StaticData CPart to simply adding a Script CPart that uses script.exports to expose data, other than it being slightly more convenience (e.g. less typing), and intentionally less flexible compared to a script CPart.

attrs

-src - Just like any other CParts, the -src= attribute lets you load the content from another URL. This could be from an API (e.g. something like -src="https://some.api.com/v1/getdata?p=3"), or for loading from a file (e.g. -src="./data/weatherData.json"), or for loading from a file. If not specified, then the data must be specified within the StaticData tag, or else it will be simply "undefined".
-data-type - This optional attribute should be set to a file-type string (e.g. extension) of a registered converter. By default, the ones that are available are:
- Default: -data-type="json" - This is a strictly JSON syntax (no trailing commas, double quotes only)
- -data-type="js" - This is a JavaScript syntax JSON object (allows for trailing commas, optional quotes, and even invoking functions to manipulate the data before "freezing" it or bundling it)
- -data-type="csv" - This is a simple CSV parser, great for importing spreadsheet data as exported from popular spreadsheet apps
- -data-type="txt" - This is a plain text file. It will be made available as a string in the renderObj.

renderObj

The StaticData CPart exposes it's data directly (e.g. so it can be accessed in Script, Template, etc).

Usage Examples

Examine the following examples for ideas on how to use StaticData:

Using an API

<!-- Load package.json file directly from GitHub -->
<Template>
    {{ staticdata.name }} v{{ staticdata.version }}
    (by {{ staticdata.author }})
</Template>
<StaticData
    -src="https://raw.githubusercontent.com/modulojs/modulo/main/package.json"
></StaticData>

Displaying a table with a for loop

<Template>
    <h4>uid</h4> <h4>Title</h4> <h4>Body</h4>
    {% for item in staticdata %}
        <div>#{{ item.userId }}</div>
        <div>{{ item.title|truncate:5 }}</div>
        <div>{{ item.body|truncate:10 }}</div>
    {% endfor %}
</Template>
<!-- Load 100 items of sample data from a
     JSON placeholder website "typicode" -->
<StaticData
    -src="https://jsonplaceholder.typicode.com/posts"
></StaticData>
<Style>
    :host {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        height: 150px;
        overflow: auto;
    }
</Style>

Displaying a table from an API

<Template>
    {% for category, info in staticdata %}
        <h4>{{ category }}</h4>
        <section>
            <h5>date</h5> <h5>name</h5> <h5>bunt</h5>
            {% for holiday in info.events %}
                <div>{{ holiday.date }}</div>
                <div>{{ holiday.title }}</div>
                <div>{{ holiday.bunting|yesno:"X,_,?" }}</div>
            {% endfor %}
        </section>
    {% endfor %}
</Template>
<StaticData
    -src="https://www.gov.uk/bank-holidays.json"
></StaticData>
<Style>
  section {
      display: grid;
      grid-template-columns: 2fr 3fr 1fr;
      font-size: 0.7rem;
      height: 80px;
      overflow-x: auto;
  }
  h4, h5 {
      margin: 0;
      padding: 0;
  }
</Style>

Use case: DataViz - Data visualization is a huge topic. Modulo is not strictly a data visualization tool: Typically, you'll want to use a tried-and-true, "off-the-shelf" graphing library, or SVG-based graphics, which Modulo could work in conjunction with or pass the data into. However, in either case, "StaticData" and "Template" combined can be used for quick data visualizations, very useful for assembling dashboards, reports, and many other types of web projects.

Usage: Mixing in JavaScript

By adding -data-type=js, we can begin to mix in JavaScript in with our StaticData. This JavaScript will run at "build time", meaning it will happen before the data is bundled in. This allows you to filter through large data sets and only include the data you want, or provide the attributes you want.

For example:

Note the alternative <script StaticData syntax for defining StaticData. This is not a Script CPart: It is indeed a StaticData CPart! However, we can start with <script ... just as a convenience, so that editors will recognize it as JavaScript code. Just make sure to include that StaticData as the first attribute, otherwise Modulo will think it's a regular Script, which behaves much differently than StaticData!

Embedding data with -data-type="js"

<Template>
    {% for item in staticdata %}
        <label>
          <img src="{{ item.thumbnailUrl }}" />
          <tt>#{{ item.id }}</tt>
          {{ item.title|capfirst }}
        </label>
    {% endfor %}
</Template>
<!-- Hardcode lorem ipsum / sample data, with a custom data type specified so
we can use the more relaxed JavaScript syntax rules -->
<script StaticData -data-type="js">
[
  {
    id: 1,
    title: "accusamus beatae ad facilis cum similique qui sunt",
    url: "https://via.placeholder.com/600/92c952",
    thumbnailUrl: "https://via.placeholder.com/50/92c952"
  },
  {
    id: 2,
    title: "reprehenderit est deserunt velit ipsam",
    url: "https://via.placeholder.com/600/771796",
    thumbnailUrl: "https://via.placeholder.com/50/771796"
  },
]
</script>
<Style>
    :host {
        display: flex;
        height: 150px;
        overflow: auto;
    }
    tt {
        font-size: 2rem;
    }
</Style>

Filtering with JavaScript

<Template>
    <h4>uid</h4> <h4>Title</h4> <h4>Body</h4>
    {% for item in staticdata %}
        <div>#{{ item.userId }}</div>
        <div>{{ item.title|truncate:5 }}</div>
        <div>{{ item.body|truncate:10 }}</div>
    {% endfor %}
</Template>
<!-- Load items from a JSON placeholder website "typicode", and then use the
content of a StaticData tag to pre-filter them right after loading -->
<script StaticData -data-type="js" -src="https://jsonplaceholder.typicode.com/posts">
    .filter(post =>
        post.userId === 5
    )
</script>

<Style>
    :host {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        height: 150px;
        overflow: auto;
    }
</Style>

Making a small chart with JavaScript

<Template>
    {% for number in month_numbers %}
        <section style="--month-number: {{ number }};">
            <h2 title="Month #{{ number }}">{{ number }}</h2>
            {% for event in staticdata %}
                {% if event.month is number %}
                    <article>{{ event.title }}</article>
                {% endif %}
            {% endfor %}
        </section>
    {% endfor %}
</Template>

<StaticData -name="month_numbers">
    [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
</StaticData>

<script StaticData -src="https://www.gov.uk/bank-holidays.json" -data-type="js">
    ['england-and-wales']
    ['events']
    .map(function (originalEvent) {
        // Get item 1 when split by dashes, convert to number (gets month)
        return {
            month: Number(originalEvent.date.split('-')[1]),
            title: originalEvent.title,
        };
    })
</script>

<Style>
    :host {
        height: 200px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }
    h2 {
        font-size: 0.9rem;
    }
    section {
        display: flex;
        flex-direction: column-reverse;
    }
    section:hover {
        background: #aaa;
    }
    article {
        font-size: 0.8rem;
        grid-column: var(--month-number) / span 1;
        background: orange;
        color: white;
        font-weight: bold;
        box-sizing: border-box;
        height: 10px;
        width: 15px;
        overflow: hidden;
    }
    article:hover {
        height: 50px;
        width: 85px;
        margin-bottom: -40px;
        margin-right: -70px;
        z-index: 1;
    }
</Style>