CODEWITHSUNDEEP
sveltesvelte-3
tree em
tree em

Reputation: 21751

how to loop over list and display 4 items per row in svelte

I have the following code

<script>
    let cats = [
        { id: 'OUtn3pvWmp1', name: 'Cat1' },
        { id: 'OUtn3pvWmp2', name: 'Cat2' },
        { id: 'OUtn3pvWmp3', name: 'Cat3' },
        { id: 'OUtn3pvWmp4', name: 'Cat4' },
        { id: 'OUtn3pvWmp5', name: 'Cat4' },
        { id: 'OUtn3pvWmp6', name: 'Cat6' },
        { id: 'OUtn3pvWmp7', name: 'Cat7' },
        { id: 'OUtn3pvWmp8', name: 'Cat8' },
        { id: 'OUtn3pvWmp9', name: 'Cat9' },
    ];
</script>
<style>
    .first{ background-color:pink}
    .second{ background-color:yellow;padding-top:10px}
    .third{ background-color:green;padding-top:10px}
</style>

I want to loop over the data and display it 4 items per row like this as output.

<h1>The Famous Cats of YouTube</h1>
  <div class="row first">
    <main class="col-md-10 col-md-10 col-lg-10 px-md-4 pt-1" role="main">
      <div class="row first">
        <div class="card-group">
          <div class="card">cat1</div>
                     <div class="card">cat2</div>
                     <div class="card">cat3</div>
                     <div class="card">cat4</div>
           </div>
            </div> <!--end row -->
                <div class="row second">
                        <div class="card-group">
                            <div class="card">cat5</div>
                             <div class="card">cat6</div>
                             <div class="card">cat7</div>
                             <div class="card">cat8</div>
                     </div>
             </div> <!--end row -->
              <div class="row third">
                        <div class="card-group">
                             <div class="card">cat9</div>
                </div>
            </div><!--end row -->
    </main>
</div>

Upvotes: -1

Views: 1417

Answers (2)

AngularNerd
AngularNerd

Reputation: 991

Here is the way that I use. The number of columns per row is a variable. This uses modulo math. There is an if-condition that checks for the existence of an item in a array to make sure you don't use an out of bound index.

<script>
let cols = 4;
let cats = [...];
</script>

{#each cats as cat, i}
    {#if i % cols === 0}
     <div class="row">
      {#each Array(cols) as _,j}
        {#if cats[i/cols*cols + j]}
        <div class="col">{cats[i/cols*cols + j]}</div>     
         {/if}
       {/each}
      </div>
    {/if}
{/each}

Upvotes: 0

nologin
nologin

Reputation: 1452

An implentation based on the list could look like this:

Use a modulo operation:

{#each cats as cat, i}
    {#if i % 4 === 0}
        <div>{cats[i]}</div>
        <div>{cats[i + 1]}</div>
        <div>{cats[i + 2]}</div>
        <div>{cats[i + 3]}</div>
    {/if}
{/each}

To arrange <div>-tags as described you need additional css in your example. Add:

you have to define the css classes for row and card-group.

<style>
.row {
display:grid;
grid-columns: 4;
}

.card-group {
display: flex;
}
</style>

Upvotes: 3

Related Questions