Dynamic content - fetching JSON data on page load

There are many uses cases for being able to retrieve content dynamically. For example, we might want to display a cart summary like we saw in the last chapter. Or on a product page, we might want to pull in a list of related products. On an article page, we might want to pull in a list of comments. AMP provides a very useful tool to help achieve these goals: amp-list.

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