I have successfully used amp-list and amp-mustache to build a list with a simple JSON of an array of objects and have a working version in JS but trying to convert it to AMP.
I'm trying to group it by category value of each item. I'm unable to figure out how to make it work. Any suggestions would be greatly appreciated!
Below is sample codes for the list without the category.
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<amp-list width="auto" height="140" layout="fixed-height" items="." src="/test-data">
<template type="amp-mustache">
<div class="col-12">
<a href="{{url}}">
<div class="d-flex">
<amp-img src="{{image}}" width="100" height="100"></amp-img>
<div class="col-8">
<h4>{{text}}</h4>
</div>
</div>
</a>
</div>
</template>
</amp-list>
Sample JSON Data:
[
{
"url": "google.com",
"image": "https://picsum.photos/100",
"text": "Text Here",
"category": "A"
},
{
"url": "stackoverflow.com",
"image": "https://picsum.photos/100",
"text": "More Text Here",
"category": "B"
},
{
"url": "yahoo.com",
"image": "https://picsum.photos/100",
"text": "Some Text",
"category": "A"
},
]
Ideal result:
