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

EUR 2.00

<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>

Wünschst du eine genauere Erklärung?

Sollten die Erklärungen auf dieser Seite nicht all deine Fragen beantworten, kannst du dich gerne an andere AMP Nutzer wenden, um deinen konkreten Use Case zu besprechen.

Zu Stack Overflow wechseln

Ein Feature wurde nicht erklärt?

Das AMP Projekt ist auf deine Teilnahme und deine Beiträge angewiesen! Wir hoffen natürlich, dass du dich aktiv an unserer Open Source Community beteiligen wirst. Aber wir freuen uns auch über einmalige Beiträge zu den Themen, die dich besonders interessieren.

Beispiel auf GitHub bearbeiten

Written by @philkrie