Mapping Data

Last updated 4 months ago

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 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.

Mapping Arrays of Objects

If your Datasource's response is an array, you may use the top-level array to repeat elements in your feature, one instance for each entry in the array. Use the repeat attribute to accomplish this. Once you've selected an element to repeat, that element and any of it's descendants may use the keys of the contained objects (they must all contain the same keys) to map their attributes. This allows you to create complex feeds. The same behavior may be repeated for arrays contained in objects, or arrays of objects.

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.