How to display nested object in API call?

Question

I'm trying to display conversion rates from a foreign exchange rate API using ejs. Using scriplet tags in express is throwing me off.

The json returned is displayed below and I'm trying to display each conversion_rate key-value pair on my results.ejs page.

    result: 'success',
    documentation: 'https://www.exchangerate-api.com/docs',
    terms_of_use: 'https://www.exchangerate-api.com/terms',
    time_last_update_unix: 1606694407,
    time_last_update_utc: 'Mon, 30 Nov 2020 00:00:07 +0000',
    time_next_update_unix: 1606780927,
    time_next_update_utc: 'Tue, 01 Dec 2020 00:02:07 +0000',
    base_code: 'GBP',
    conversion_rates: {
      GBP: 1,
      AED: 4.9044,
      ARS: 108.037,
      AUD: 1.8075,
      BGN: 2.1882,
      BRL: 7.136,
      BSD: 1.3357,
      CAD: 1.733,
      CHF: 1.2087,
      CLP: 1023.4903,
      CNY: 8.7698,
      COP: 4871.9524,
      CZK: 29.3023,
      DKK: 8.3295,
      DOP: 77.3911,
      EGP: 20.8628,
      EUR: 1.1174,
      FJD: 2.7808,
      GTQ: 10.3785,
      HKD: 10.3355,
      HRK: 8.4544,
      HUF: 404.6535,
      IDR: 18958.4116,
      ILS: 4.4258,
      INR: 98.6626,
      ISK: 178.3468,
      JPY: 138.8819,
      KRW: 1474.7375,
      KZT: 565.2541,
      MVR: 20.5365,
      MXN: 26.7327,
      MYR: 5.4266,
      NOK: 11.8059,
      NZD: 1.8997,
      PAB: 1.3357,
      PEN: 4.804,
      PHP: 64.209,
      PKR: 212.2635,
      PLN: 5.0185,
      PYG: 9301,
      RON: 5.4534,
      RUB: 101.3236,
      SAR: 4.9995,
      SEK: 11.3603,
      SGD: 1.7846,
      THB: 40.4235,
      TRY: 10.449,
      TWD: 38.0077,
      UAH: 37.9832,
      USD: 1.3335,
      UYU: 56.8079,
      ZAR: 20.3363
    }
  }

Here is my server.js route

app.get('/results', (req, res) => {
  const query = req.query.q;
  axios
    .get(`https://v6.exchangerate-api.com/v6/a66b8aae93f6e7abafe3aab5/latest/${query}`)
    .then(function (response) {
      const currencyPair = `Conversion Rates for ${query}`;
      console.log(response)
      res.render('results', {
        currencyPair,
        results: response.data,
      });
    })
});

And here is my current result.ejs page. It only displays [object Object] currently.

<h1><%= currencyPair %></h1>
<ul>
  <li>
    <div class="results">
      <div class="base">
        <span>Base Pair:</span>
        <span><%= results.base_code %></span>
      </div>
      <div class="conversionRate">
        <span>Conversion Rates:</span>
        <span><%= results.conversion_rates %></span>
      </div>
    </div>
  </li>
</ul> 

Answer 1

In a ejs template you can only print strings, but you're trying to print an object. That's why you get the [object Object] .

To print an object, you just have to stringify it:

<%= JSON.stringify(results.conversion_rates) %>