StaticData

The StaticData Component Part 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 Component Part 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 the element itself. As with remote data, it can be in JSON, or other file-formats as described below with the -data-type= attribute.

attrs

-src - Just like any other Component Parts, 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 Component Part 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

Displaying a table with a for loop

Displaying a table from an API

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 Component Part: It is indeed a StaticData Component Part! 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!