Search code examples
amp-html

AMP Mustache and Math

I am getting some variables from a JSON file using amp-list and amp-template. One of the variables I've gathered is a number that I need to round up or down. The number would normally be displayed as {{number}}. However, I need to manipulate this number to make it a whole number. I am not sure how to do the conversion on that amp var. any help is appreciated.

Solution

  • If you're displaying data in an amp-list you can do the rounding inside the src attribute by using amp-state and map:

    <amp-state id="myState" src="http://your-data.com/json">

<amp-list 
    ... 
    [src]="
        myState.myItems.map(item => {
            roundedValue: round(item.value),
            otherProperty: item.otherProperty
        })
    "> 
    ... 
</amp-list>

    and then use roundedValue in your template.

    See this page for the list of supported functions:

    https://www.ampproject.org/es/docs/reference/components/amp-bind#white-listed-functions

    But keep in mind that if your objects have a lot of fields you may run into the expression size limit that AMP imposes on expressions inside attributes (they can't perform more than 50 operations IIRC, including function calls, math operations, field dereferencing, etc).