How to display the fetched data from the api on svelte?

Question

first time i'm trying to write an app on svelte, i wrote the function to get the data from api and destructured the data to get only what i need. But i don't get how to render it?

the function looks like this:

<script>
    async function getCurrencies() {
    const response = await fetch(BASE_URL);
    const data = await response.json();
    console.log(data);
    const { conversion_rates } = data;
    console.log(conversion_rates);
  }

getCurrencies();
</script>

and the element where i should render the information looks like this:

<div class="currency-input">
  <input type="number" min="0" /> // exchange rate should be displayed
  <select>
    <option value="USD">USD</option> // now it's hardcoded but i need to display the list of currencies from the API
  </select>
</div>

the response that i see on my console it's an object with all the currencies like this:

{ USD: 1, EUR: 0.90, ... }

Someone can give some advice how to do it? I'm a little confused,

Answer 1

You can use {#each} directive to loop through the object: https://learn.svelte.dev/tutorial/each-blocks

<script>
    async function getCurrencies() {
    const response = await fetch(BASE_URL);
    const data = await response.json();
    console.log(data);
    const { conversion_rates } = data;
    console.log(conversion_rates);
  }

let currencies = getCurrencies();
</script>

<div class="currency-input">
  {#each Object.keys(currencies) as currency}
  <input type="number" min="0" /> 
  <select>
    <option value={currencies[currency]}>{currency}</option> // You can wrap javascript inside curly braces
  </select>
  {/each}
</div>