[SOLVED] AMP list - how to remove empty space if we get no response from the API?

AMP list - how to remove empty space if we get no response from the API?

We have AMP page where we get 3 lists from the server and we bind it on the client. Here is the fiddle for the same.

But since the output is dynamic and we are specifying height as 100, in the code here where 2nd list is returning empty json, we are seeing a lot of empty space which is not desirable.

The code that fetches empty list is:

<amp-list width="auto" height="100" layout="fixed-height" src="https://ampbyexample.com/json/examples-empty.json" class="m1">
    <template type="amp-mustache" id="amp-template-id">
      <div><a href="{{url}}">{{title}}</a></div>
    </template>
</amp-list

How can we get rid of this fixed height AMP list and adjust the height based on the content received from the server?

I read something similar here but am unable to follow this. Could someone please share how to resolve this?

Solution

This is currently not possible with amp-list. You can use amp-access instead. The approach would be to return the JSON data in the amp-access authorization endpoint. Based on the data you can then dynamically render content on the page:

<section amp-access="items">
  <template amp-access-template type="amp-mustache">
    {{#items}}
    <div><a href="{{url}}">{{title}}</a></div>
    {{/items}}
  </template>
</section>