如何在svelte上显示从api获取的数据？

Question

第一次尝试在 svelte 上编写应用程序时，我编写了从 api 获取数据的函数，并对数据进行解构以仅获取我需要的数据。但我不知道如何渲染它？

该函数如下所示：

<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>

我应该在其中呈现信息的元素如下所示：

<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>

我在控制台上看到的响应是一个包含所有货币的对象，如下所示：

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

有人可以给一些建议如何做吗？我有点困惑

Answer 1

您可以使用

{#each}

指令循环访问对象：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>