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.
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
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
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.
-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:
-data-type="json"- This is a strictly JSON syntax (no trailing commas, double quotes only)
-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.
The StaticData CPart exposes it's data directly (e.g. so it can be accessed in Script, Template, etc).
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.
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.
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
<script ... just as a convenience, so that editors will recognize it as
attribute, otherwise Modulo will think it's a regular Script, which behaves much
differently than StaticData!