AMP: Building Accelerated Mobile Pages

The <amp-list> component

The amp-list component can be used to fetch JSON content dynamically from a server endpoint. It's included with the following script:

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

The server response is expected to contain an array property, with default name items:

{  "items": [...]}

Since we're dealing with JSON here, you're probably thinking that we can use amp-mustache again, like we did in the last chapter, and you'd be right! So, if we had name, price, quantity, and image JSON properties, a simple amp-list (and its mustache template) could look like this:

<amp-list src="https://theampbook.com/ch7/data.json" width="200" height="400" layout="responsive">