CODEWITHSUNDEEP
amp-html
Nouh Belahcen
Nouh Belahcen

Reputation: 854

how to get data using amp-state without any action

I'm trying to get value from API using amp-state but the problem is it's like you need to do an action to get the data.

<amp-state id="currentTime"
  src="/documentation/examples/api/time"></amp-state>
<button on="tap:currentTime.refresh">
  Refresh
</button>
<div [text]="currentTime.time"></div>

in the example, above you need to click on the button refresh to get the results, is there another way to ger gata directly without doing any action?

Upvotes: 1

Views: 2338

Answers (1)

Alexandr Kazakov
Alexandr Kazakov

Reputation: 698

how to get data using amp-state without any action ?

As stated in the documentation:

amp-bind expressions are not evaluated on page load, but only after an user interaction has taken place. Initial amp-list content still needs to be fetched from a JSON endpoint.

Link: https://amp.dev/documentation/examples/components/amp-list/?format=websites#rendering-amp-state

This part: [text]="currentTime.time" is related to amp-bind. Therefore, this is not possible. Use the amp-list:

<amp-state id="currentTime" src="/documentation/examples/api/time"></amp-state>

<amp-list height="100" items="." src="/documentation/examples/api/time" single-item [src]="currentTime">
  <template type="amp-mustache">
      <div [text]="currentTime.time">{{time}}</div>
   </template>
</amp-list>

<button on="tap:currentTime.refresh">Refresh</button>

Then it will be displayed immediately after loading the page and updated when the button is clicked.

Upvotes: 2

Related Questions