Currently, I am embarking on a project to develop a currency conversion application resembling the one found on Google's platform. The main hurdle I am facing lies in restructuring the data obtained from fixer.io to achieve a similar conversion method as seen on Google. To access the necessary data for this task, I can only utilize the designated endpoint provided by fixer.io: .
Beneath, you will find snippets of my code which might offer additional clarity. Furthermore, a working example has been set up using Stackblitz here: https://stackblitz.com/edit/angular-9-material-starter-o9yvuu?file=src/app/app.component.ts
Service
//list endpoint from Fixer.io
currencyRates(): Observable<any> {
return this.http.get(this.baseURL + this.accessKey);
}
TS
//call endpoint and manipulate data to use on HTML
public currencies: any;
public currenciesArr: any;
getCurrencies() {
this.currencyService.currencyRates().subscribe({
next: (v) => {
this.currencies = v;
let result = Object.keys(this.currencies.rates).map((key) =>
[String(key), this.currencies.rates[key]]
);
this.currenciesArr = result;
console.log(this.currenciesArr);
},
error: (e) => console.error(e),
complete: () => console.info('complete')
});
}
HTML
<mat-form-field class="form-field" appearance="outline">
<mat-label> Input Currency
</mat-label>
<input matInput formControlName="input" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Select an option</mat-label>
<mat-select >
<mat-option *ngFor="let item of currenciesArr" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field" appearance="outline">
<mat-label> Output Currency
</mat-label>
<input matInput formControlName="output" type="output" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Select an option</mat-label>
<mat-select >
<mat-option *ngFor="let item of currenciesArr" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
The original data fetched from the endpoint had a distinct structure which I modified to fit into my dropdown menus through the use ofObject.keys.
{
"success": true,
"timestamp": 1645249562,
"base": "EUR",
"date": "2022-02-19",
"rates": {
"AED": 4.158769,
"AFN": 104.057478,
"ALL": 121.54654
}
}
As I delve deeper into this project, I find myself pondering whether the creation of two arrays is the best approach - one for storing currency names and the other for their values. Any guidance or assistance in navigating this challenge would be greatly appreciated.
Amidst my current brainstorming session, I am contemplating various solutions, but uncertainty clouds my judgement. Your insight could bring clarity to this perplexing issue I currently face.