Iterating over JSON data with <amp-mustache>

Another nice feature of amp-mustache is its ability to iterate over arrays. The JSON payload from the server endpoint contains an array of products that matched the search keywords. Once we know the name or key of the JSON object array--results in this case--we can use the following mustache syntax to get at the data:

{{#results}}  ...{{/results}}

With this, we could use the following template to simply output the data returned by the server:

<div submit-success>  <template type="amp-mustache">    {{#results}}      <div>{{name}}, {{price}}, {{description}}, {{image}}</div>    {{/results}}  </template></div>

Let's improve this. Since we have a relative URL to each product's thumbnail image, we can display the ...

Get AMP: Building Accelerated Mobile Pages now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.