Closing an element every x iteration of each in Svelte-CodePudding

I am trying to write an application where every 3 bookmarks, Svelte closes the Row and begins a new one, allowing for the rows to continue. This is my code.

<Row>
    {#each bookmarks as bookmark, i}
        <Col>
        <Card >
          <CardHeader>{bookmark.title}</CardHeader>
          <CardBody>
            <CardSubtitle>{#each Array(parseInt(bookmark.rating)) as _, i}
                <img fill="#ffffff" src="/res/star-fill.svg" alt="Star">
            {/each}{#each Array(5 - parseInt(bookmark.rating)) as _, i}
            <img src="/res/star.svg" alt="Star">
            {/each}
            </CardSubtitle>
            <CardText>{bookmark.description}</CardText>
          </CardBody>
          <CardFooter>{bookmark.rating}</CardFooter>
        </Card>
    </Col>
    
    {#if (i % 3 === 0)}
    </Row>
    <Row>
    {/if}
    {/each}
    </Row>

This gives me an error about closing an element that doesn't exist, but I'm trying to close the row before it. Is there any way for Svelte to see the previous element in its array?

CodePudding user response：

{#each Array(Math.ceil(bookmarks.length / 3)) as _, i}
    <Row>
        {#each bookmarks.slice(i * 3, i*3 3) as bookmark, j}
            <Col>
                <Card >
                    <CardHeader>{bookmark.title}</CardHeader>
                    <CardBody>
                        <CardSubtitle>
                            {#each Array(parseInt(bookmark.rating)) as _, k}
                                <img fill="#ffffff" src="/res/star-fill.svg" alt="Star">
                            {/each}
                            {#each Array(5 - parseInt(bookmark.rating)) as _, k}
                                <img src="/res/star.svg" alt="Star">
                            {/each}
                        </CardSubtitle>
                        <CardText>{bookmark.description}</CardText>
                    </CardBody>
                    <CardFooter>{bookmark.rating}</CardFooter>
                </Card>
            </Col>
        {/each}
    </Row>
{/each}

CodePudding user response：

One solution could be to cut the bookmarks in chunks of three, so you can wrap two #each loops - one for the rows and one for the columns with matching opening and closing tags.
Here's an example using a chunk function from this question >> REPL

<script>
    const items = [1,2,3,4,5,6,7,8,9,10]

    function chunkArray (arr, size) {
        return arr.length > size
            ? [arr.slice(0, size), ...chunkArray(arr.slice(size), size)]
        : [arr]
    }

    const groups = chunkArray(items, 3)
    console.log(groups)

</script>

{#each groups as items}
<div >
    {#each items as item}
    <span >{item}</span>
    {/each}
</div>
{/each}

Like commented I would question the Row component and think about if this is really neccessary or if there might be a css only solution instead...