Fetching a list of related products with <amp-list>

As its name suggests, amp-list is good for processing lists. Let's go back to our product page and add a list of related products to the bottom. This is a good fit for amp-list because it means we can deliver dynamic content in our AMP pages, even when served via the AMP Cache.

Note

Additionally, you could personalize amp-list content by appending the CLIENT_ID parameter that we saw in the last chapter to the amp-list URL. This would allow you to differentiate between users and send them different content as needed.

To start with, we'll set up the server to respond with a JSON array of related products like this (full JSON listing at /ch7/related-products.json):

{
  "items":[
    {
      "product_id":"tshirt-2",
      "name":"T-Shirt: La Bierre",
      "price":"9.99",
      "image":"img/tshirt-10-f-black-320.png",
      "url":"..."
    },
    ...
  ]
}

This should look familiar--it's similar to the JSON data returned by the server endpoint...