CODEWITHSUNDEEP
amp-html
Hamza.am.i
Hamza.am.i

Reputation: 143

AMP: amp-state on data load callback function

Is there a way to know when "amp-state" has received the response data from server URL specified in "src". Like an onLoad callback function. So that i can process that data before rendering it with "amp-list". 

<amp-state
      id="myList"
      src="https://company.com/list">
</amp-state>

Upvotes: 1

Views: 1728

Answers (1)

Sebastian Benz
Sebastian Benz

Reputation: 4288

You can do this implicitly by performing the processing rendering data with amp-list:

<amp-state
      id="myList"
      src="https://company.com/list">
</amp-state>
<amp-bind-macro
  id="process"
  arguments="listItems"
  expression="listItems.map(item => ...)"
></amp-bind-macro>
<amp-list [src]="process(myList)" ..>
</amp-list>

You don't need to use amp-bind-macro here, but it makes things more readable.

Another option is to use amp-script to fetch the data and update the state:

<amp-script height="1" width="1" script="fetch-script">
</amp-script>

<script id="fetch-script" type="text/plain" target="amp-script">
  console.log('fetching');
  fetch('https://preview.amp.dev/static/samples/json/examples.json')
    .then(response => response.json())
    .then(json => AMP.setState({myList: json.items}))
</script>

<amp-list layout="fixed-height" height="0" binding="no" [src]="myList" [is-layout-container]="true"
  items=".">
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>

<button on="tap:AMP.setState({})">Click to evaluate bindings</button>

Upvotes: 4

Related Questions