Currency converter data manipulation not working

Question

I am trying to create a currency converter application similar to the one that Google has i.e

My challenge is that the data I have to work with which comes from fixer.io needs to be reworked in order to accomplish the above Google converter. I can only use the following endpoint from fixer.io which is http://data.fixer.io/api/latest?access_key=.....

My code below may explain a bit better. I have also created a 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 data that originally came from the endpoint looked like below which I subsequently converted in order to use in my dropdown boxes. Converting it in my TS using Object.keys.

{
    "success": true,
    "timestamp": 1645249562,
    "base": "EUR",
    "date": "2022-02-19",
    "rates": {
        "AED": 4.158769,
        "AFN": 104.057478,
        "ALL": 121.54654
    }
}

I am now confused as to how to manipulate the data further so that I can show the currency name in the dropdowns and the actual value of the currency in the input fields. Can anyone please help me here?

I am currently thinking that I need to create 2 arrays. Once for the currency name, the other for the value but I am so lost.

Answer 1

Ok, so that data you have is enough, you just need some gymnastics :)

FIrst, I'd make an array (for example: allCurrencies) of currency objects, each having the structure: { currency: 'XYZ', baseRate: '1234' } where 'XYZ' would be names of currencies taken from your 'rates' field, and '1234' would be a conversion value of the given currency (Against EUR).

Second, in template I'd iterate over that array and set dropdown options to 'currency' values. Optionally, I'd make output currency input field readonly.

Third, when 'input currency' is changed/set and the corresponding text input is not empty/null, I'd immediately (in .ts) convert the amount to EUR, based on allCurrencies 'baseRate' for that 'currency'. Let's call this new amount convertedOriginal.

Fourth, when the 'output currency' is changed (and if 'input currency' is picked and the corresponding text input is not empty/null), I'd convert the convertedOriginal value to selected output currency's rate.