Currency Conversion
Introduction
This example shows how to use amp-bind to filter JSON data on select of option in select dropdown.
Setup
We include amp-bind to track the state
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> Implementation
This example uses a public currency endpoint to populate amp-state. The default value is EUR (euro) and we convert the currency values by updating amp-state when the user changes the dropdown to a different currency.
Banana
<amp-state id="currencyFilter" src="https://api.exchangeratesapi.io/latest"></amp-state> <amp-state id="defState"> <script type="application/json"> { "currencyRate": 1, "currencyDecimal": 2, "currencyCode": "EUR" } </script> </amp-state> <select on="change:AMP.setState({ defState: { currencyRate: event.value == 'EUR' ? 1 : currencyFilter.rates[event.value], currencyCode: event.value } })"> <option value="CAD">CAD</option> <option value="EUR" selected>EUR</option> <option value="HKD">HKD</option> <option value="ISK">ISK</option> <option value="USD">USD</option> <option value="GBP">GBP</option> <option value="RUB">RUB</option> <option value="INR">INR</option> </select> <h3>Banana</h3> <div> <span [text]="defState.currencyCode">EUR</span> <span [text]="(2*defState.currencyRate).toFixed(defState.currencyDecimal)">2.00</span> </div> <amp-img src="https://cdn.glitch.com/cbcdd9ba-70f9-4d53-a19d-486e4b70f73f%2F440px-Cavendish_Banana_DS.jpg?v=1578089065672" height="112" width="112" layout="fixed" title="banana"></amp-img> Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.
Ir para o Stack Overflow Falta explicar algum recurso?O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.
Editar amostra no GitHub-