Displaying Token Metadata
Collectible tokens are based on the ERC721 standard, and most (not all) adhere to a standard Metadata format popularized by OpenSea the online collectible marketplace.
We will be adding more information and support for metadata at a later date
Metadata exists on collectibles as a JSON formatted object. On this object will be information that describes the various characteristics of the collectible. Because this metadata can be virtually anything, we have created a special tag
data-dh-property-asset-json-pathto help you access it.
Note: metadata can be potentially extremely nested data,
data-dh-property-asset-json-pathwill do it's best to identify the piece of data you are specifically interested in, but for some complex objects or with repeating key names at different levels, it can struggle. Additionally, not all tokens respect the metadata format, even within the same collectible group. We will be releasing a new tag in the future to allow you to identify the exact data attribute you want in the future.
Lets take a sample collectible JSON object:
"description": "Friendly OpenSea Creature that enjoys long swims in the ocean.",
"name": "Dave Starbelly",
"attributes": [ ... ],
Here we have a description, an external URL, image, name and array of attributes. The top level elements, "image" or "name" for example can be access using the following tags:
<img data-dh-property-asset-json-path="image_url" />
In this example we are retrieving a list of collectibles owned by the
user addressthe method instance is described in the div from lines 1-4, the parent asset container is the div that opens on line 6 and closes on line 11. The children elements are the
imgtag which displays the token image and the
h3tag which displays the assets name. As this is a list, it will display multiple tokens owned by this address, with the image and name coming from each respective token.
For the "attributes" they currently are not natively accessibly via HTML tags, and will require the use of jQuery to access. Look forward to a future DappHero feature to handle this use case!