Making currency name and currency symbol helpers for Open Event Frontend
This blog article will illustrate how to make two helpers which will help us in getting the currency name and symbol from a dictionary, conveniently.The helpers will be used as a part of currency form on Open Event Front End It also exemplifies the power of ember JS and why is it being used in this project via a counter example in which we try to do things the non ember way and get the required data without using those helpers.
So what do we have to begin with ?
The sample data which will be fetched from the API:
[ { currency : 'PLN', serviceFee : 10.5, maximumFee : 100.0 }, { currency : 'NZD', serviceFee : 20.0, maximumFee : 500.0 } //The list continues ]
The dictionary data format:
[ { paypal : true, code : 'PLN', symbol : 'zł', name : 'Polish zloty', stripe : true }, { paypal : true, code : 'NZD', symbol : 'NZ$', name : 'New Zealand dollar', stripe : true }, { paypal : false, code : 'INR', symbol : '₹', name : 'Indian rupee', stripe : true } ] // The list continues
And our primary goal is to fetch the corresponding name and symbol from the dictionary for a given currency code, easily and efficiently.
One might be tempted to get things done the easy way : via
{{get (find-by 'code' modal.name currencies) 'name'}}
and perhaps,
{{get(find-by 'code' modal.name currencies) 'symbol'}}
where currencies is the name of the imported array from the dictionary. But this might be hard to follow for a first time reader, and also in case we ever need this functionality to work in a different context, this is clearly not the most feasible choice. Hence helpers come into picture, they can be called anywhere and will have a much simpler syntax
Our goal is to make helpers such that the required functionality is achieved with a simpler syntax than the one shown previously.So we will simply generate the helpers’ boiler-plate code via ember CLI
$ ember generate helper currency-name $ ember generate helper currency-symbol
Next we will import the currency format from the payment dictionary to match it against the name or symbol provided by the user. Now all that remains is finding the correct matching from the dictionary. We import the find function from lodash for that.
So, this is how they would look
import Ember from 'ember'; import { find } from 'lodash'; import { paymentCurrencies } from 'open-event-frontend/utils/dictionary/payment'; const { Helper } = Ember; export function currencyName(params) { return find(paymentCurrencies, ['code', params[0]]).name; } export default Helper.helper(currencyName);
And for the currency symbol helper
import Ember from 'ember'; import { find } from 'lodash'; import { paymentCurrencies } from 'open-event-frontend/utils/dictionary/payment'; const { Helper } = Ember; export function currencySymbol(params) { return find(paymentCurrencies, ['code', params[0]]).symbol; } export default Helper.helper(currencySymbol);
Now all we need to do use them is {{currency-name ‘USD’}} and {{currency-symbol ‘USD’}} to get the corresponding currency name and symbol. We use find from lodash here instead of the default even though it is similar in performance because it provides much better readability.
Resources
*Featured Image licensed under Creative Commons CC0 in public domain