{#each} within an {#each} --- problem passing out data to components

Question

What I am trying to do is build a page where sellers (shops)) are displayed and then a Modal under each card that when opened shows the full products list of that particular seller.

I get an api response with all the necessary data, so I used an {#each} block to iterate through the results... every seller has a products array containing its assiciated products.

I made another #each block inside the parent #each to iterate through the products and show their names inside the seller card, which all worked well. Then I added a Modal component (from daisyUI) at that when pressed should show the products of that seller inside the Modal, so inside the Modal I created a similar #each block to iterate through the products of that seller... and here is where my problem rose, the products shown on all card modals for each seller is the products of the first seller in the array only, where it should display products of each seller when their Modal is opened.

This is how the result looks like, all modals show only the products of the first seller in the list:

The api data looks like this:

[
  {
    __typename: 'Sellers',
    id: 'adbd9aaa-909e-4bc0-b966-dc75e394ee36',
    image: {
      __typename: 'directus_files',
      id: '79029bc7-15fb-4589-a118-b7db67817db6'
    },
    name: 'Marakana',
    products: [ [Object], [Object] ]
  },
  .......
]

Products arrays look like this:

[
  {
    __typename: 'Sellers_Products',
    Products_id: {
      __typename: 'Products',
      id: '41ca1726-be1a-4304-9a57-5be102b30fa7',
      name: 'Pizza',
      description: 'Good margarita',
      image: [Object]
    }
  },
  .......
]

+page.svelte looks like this:

<script>
    export let data;
</script>

{#each data.data.Sellers as seller(seller.id)}

<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="http://localhost:8055/assets/{seller.image.id}?fit=cover&width=400&height=225&quality=100" alt="Shoes" /></figure>
  <div class="card-body">
    <h2 class="card-title">
      {seller.name}
      <div class="badge badge-secondary">NEW</div>
    </h2>
    <p>{seller.description}</p>
        <div class="card-actions justify-end">
            
            {#each seller.products as product(product.Products_id.id)}
      <div class="badge badge-outline">{product.Products_id.name}</div>
            {/each}
        
        </div>
        <label for="my-modal-6" class="btn modal-button">open modal</label> 
        <input type="checkbox" id="my-modal-6" class="modal-toggle" />
        <div class="modal modal-bottom sm:modal-middle">
            <div class="modal-box">
            
                {#each seller.products as product(product.Products_id.id)}
                    <h3 class="font-bold text-lg">{product.Products_id.name}</h3>
                    <figure><img src="http://localhost:8055/assets/{product.Products_id.image.id}?fit=cover&width=400&height=225&quality=100" alt="Shoes" /></figure>
                    <p class="py-4">{product.Products_id.description}</p>
                    <div class="modal-action">
                        <label for="my-modal-6" class="btn">add to cart</label>
                    </div>
            
                    {/each}

            </div>
        </div>
    </div>
</div>

{/each}

I think I am missing a vital piece of information here... Any help is appreciated :D

Answer 1

So from what I can see from your code, this is not a svelte problem - rather something you need to fix when implementing the daisyUI modal component.

I'm not any daisyUI developer, but from what I can tell the <label for="my-modal-6" class="btn modal-button">open modal</label> is pointing to <input type="checkbox" id="my-modal-6" class="modal-toggle" /> and opening the modal by the id my-modal-6.

So it seems like you are creating all the proper modals with the correct data, but you are giving them the same id.

You also need to change this id so it's unique. Otherwise, like in your example, you're only going to open that specific or the first found modal with that id (my-modal-6).

Here is an example to fix it:

{#each seller.products as product(product.Products_id.id)}
    <label for="my-modal-{product.Products_id.id}" class="btn modal-button">open modal</label> 
    <input type="checkbox" id="my-modal-{product.Products_id.id}" class="modal-toggle" />
    <div class="modal modal-bottom sm:modal-middle">
        <div class="modal-box">
            <h3 class="font-bold text-lg">{product.Products_id.name}</h3>
            <figure>
                <img src="http://localhost:8055/assets/{product.Products_id.image.id}?fit=cover&width=400&height=225&quality=100" alt="Shoes" />
            </figure>
            <p class="py-4">{product.Products_id.description}</p>
            <div class="modal-action">
                <label for="my-modal-{product.Products_id.id}" class="btn">add to cart</label>
            </div>
        </div>
    </div>
{/each}