Mapping Data

Use Datasource responses to populate your UI dynamically at runtime

Mapping is one of the most powerful features in Mason. You may use arrays and object keys to modify your UI dynamically using data from your server. Before mapping, make sure you've set up your Datasources.

Mapping to Elements

Select any element in the Builder you'd like to map data to, and click the Mapping tab in the right sidebar. All mappable attributes will appear there. If there are no attributes, the element currently does not support mapping.

Mapping Objects

Mapping objects is the simplest use case. For each attribute, select a key path in the object using the dropdown menu to use that key's value as the attribute value.

Collections and Repeaters

Arrays, or object collections - an object with identical length keys and values that are objects - may be used as repeaters to duplicate parts of your UI once for each entry in the collection. Select the element you'd like to repeat, open the Mapping tab, and set the Repeat value to the path in your data you'd like to use to repeat. Only arrays and object collections will appear there. Once you have selected a repeater, the contents of the collection will be available for mapping to the descendants of the repeater.

If your datasource's response is a collection, you must use the top-level collection to repeat an element in your UI before you can use the datasource contents.

Mapping Arrays of Primitives

Arrays of primitives may also be used to repeat an element, and that element and all of its children may use the primitive value to map to attributes.