When amp-list returns an empty list, there is no easy way to render a message such as "No data" because the amp-list鈥檚 child template is not even evaluated when the list is empty.
Can we provide a fallback value for amp-list calls to better deal with cases when no data is returned?
Along the same lines there are two others issues filed (however they do not directly address the feature we are requesting here):
https://github.com/ampproject/amphtml/issues/5686 https://github.com/ampproject/amphtml/issues/9687
/to @choumx
Note to possibly combine case where developer wants to display statically rendered content on first load, then update content with amp-bind later. In that case, should not send call to server in the first place.
Note to possibly combine ability for amp-list to collapse completely if no data is returned
@ericlindley-g: good to see my FR #5686 got included here. Thanks!
Sounds like we want both placeholder
and fallback
like amp-ad
: https://www.ampproject.org/docs/guides/responsive/placeholders
Note to possibly combine case where developer wants to display statically rendered content on first load
@ericlindley-g Is "statically rendered content" just plain HTML or local JSON data?
The case I was thinking of for "statically rendered content" was just placeholder
, which works today.
I don't think this has been fixed for the case when the server returns a successful empty result, for example assume the server just returns []
and we have the following amp-list:
<amp-list items="." src="https://www.example.com/empty_response">
<div placeholder>Loading ...</div>
<div fallback>Failed to load data.</div>
<template type="amp-mustache">
<div>
{{content}}
</div>
</template>
</amp-list>
This still renders as completely empty as it tries to evaluate the Mustache template with no elements.
It would be better if we could specify an additional element here, say a div with something like empty
as an attribute:
<div empty>No content to show!</div>
I don't believe the fallback
or placeholder
values are appropriate in this case, they both serve separate functionalities.
\cc @choumx
\cc @hamousavi
@raywainman AmpByExample is adding a sample for this case. See https://github.com/ampproject/amp-by-example/pull/1124/files is that what you are looking for?
Aha, that's perfect. Thanks @aghassemi !
Thank you @raywainman & @aghassemi!
For the successful empty result scenario, I would say that is a workaround.
It requires a new hierarchical level on the data, a loop template vs. an item template and leaves me with two different approaches to handle list state (div[
For reference, this is what I am working with:
As a user, when I exclude all items available I want to receive feedback on that.
<amp-list layout="responsive" width="600" height="800" max-items="6"
src="<BASE_URL>&exclude="
[src]="'<BASE_URL>&exclude=' + exclude.join(',')">
<template type="amp-mustache">
<div>
<h3>{{title}}</h3>
<button on="tap:AMP.setState({ exclude: exclude.concat({{id}}) })"> 鈾伙笍 </button>
</div>
</template>
<div fallback>
<p>Something went wrong... we are sorry.</p>
</div>
</amp-list>
@choumx @aghassemi I have to agree with @command3r here. The data-structure changes required by the workaround proposed by Ali makes things more complicated.
In my case, the amp-list input is an array that is transformed via amp-bind-macro. The workaround only works with objects, which is not possible in my case.
My sample looks like this, where myItems
is an array of objects:
<amp-bind-macro id="transformItems" ...>
<amp-list ... [src]="transformItems(myItems)" single-item items=".">
</amp-list>
Something like <div empty-list>No content</div>
would be nice.
In my case i need to hide
I need for a "breaking news" list
Most helpful comment
In my case i need to hide element when there is no result or json is empty.
I need for a "breaking news" list