CodingNic

Market Data and API Integration

Connect the Live Rates API

Market Data and API Integration 18 min read

Connect the Live Rates API

Connect the Live Rates API

The project uses the exchange-rate endpoint already present in the final app. At the bottom of app.js, request the latest USD-based rates.

Start the request:

javascript
fetch("https://open.er-api.com/v6/latest/USD")
  .then(response => response.json())
  .then(data => {
    if (data.result !== "success") return;

    rates = { ...fallback, ...data.rates, USD: 1 };
    live = true;
    update();
    renderRates();
  });

The merge with fallback is deliberate: it keeps the UI complete even if the service does not return every currency the interface knows about.

Test it

Reload the app with the browser Network panel open and look for the rates request.

Checkpoint

When the request succeeds, the displayed conversion rate should come from the live rates object rather than only the fallback values.