All available dataset attributes - worldoptimizer/HypeDataMagic GitHub Wiki

data-magic-key

This is the main dataset key to use in this extension. Its value is used to resolve data from da data source and should resemble a JavaScript array/object notation 1. Be aware that this isn't actual JavaScript and is parsed by Hype Data Magic using regular expression. Hence, not all nuances of JavaScript array/object property accessor notation are supported. So far you can resolve the following notations.

Accessing a top level data property

To retrieves a top level data property just set data-magic-key to the property name (example: sessionId given a simple session string).

Accessing a simple nested data property

To retrieves a nested data property just set data-magic-key to the data branch seperated by dots ending in the property name (example: user.name given an user object).

Accessing a nested array data properties

To retrieve a nested array data property just set data-magic-key to the data branch seperated by dots, use square brackets surrounding including the array branch index and end with the property name. Note that the array index always begins counting at 0 (example: product[0].price or produc[1].price given an array of products).

To see an example please visit the getting started guide.

data-magic-branch

The data-magic-branch follow the same logic as the data-magic-key but would have to end in a object or an array to make sense (example: product[0] or product[1] given an array of products). To see an example please visit How to use data magic branches.

Unresolvable data branches or properties

First off, the nested property acessor notations can be nested to an abitrary depths given the data resolves and returns a value. If you reference a data-magic-key or data-magic-branch that wount't resolve it will return null and trigger an DataMagicUnload on the corresponding data-magic-handler (defaults to text and that handler for example would reset the innerHTML).


Footnotes:

1.  More about the array/object notation can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors. But keep in mind that Hype Data Magic only supports a narrow subset of the property accessor notation.

⚠️ **GitHub.com Fallback** ⚠️