While looping an array of objects in Svelte, how can I display the iteration count?

Question

I am iterating a JSON with the help of Svelte's onMount method. I have displayed the data in a table.

<script>
    import { onMount } from "svelte";

    const apiURL = "https://gist.githubusercontent.com/Goles/3196253/raw/9ca4e7e62ea5ad935bb3580dc0a07d9df033b451/CountryCodes.json";        
    let countries = [];
    
    onMount(async function() {
       const response = await fetch(apiURL);
       countries = await response.json();
    });

</script>

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Code</th>
    </tr>
  </thead>
  <tbody>
    {#if countries}
     {#each countries as country }  
     <tr>
      <td>{index + 1}</td>
      <td>{country.name}</td>
      <td>{country.code}</td>
     </tr>
     {/each}
    {:else}
    <p>There are no countries</p>
    {/if}
  </tbody>
</table>

What I have not been able to do is add an iteration count column. Using {index + 1}.

How do I get the desired result?

Answer 1

Index is a second argument of the each loop in svelte

{#each countries as country, index }  
  <tr>
  <td>{index + 1}</td>
  <td>{country.name}</td>
  <td>{country.code}</td>
  </tr>
{/each}

Here is the docs link