AMP: Building Accelerated Mobile Pages

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