AEM HTL looping using data-sly-repeat

Question

<footer id="footer">
                <div class="container">
                    <div class="row double">
                        <div class="6u">
                            <div class="row collapse-at-2">
                                <div data-sly-repeat="${properties.colNum}" data-sly-unwrap>
                                <div class="6u">
                                    <h3>Accumsan</h3>
                                    <ul class="alt">
                                        <li><a href="#">Nascetur nunc varius</a></li>
                                        <li><a href="#">Vis faucibus sed tempor</a></li>
                                        <li><a href="#">Massa amet lobortis vel</a></li>
                                        <li><a href="#">Nascetur nunc varius</a></li>
                                    </ul>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="6u">
                            <h2>Aliquam Interdum</h2>
                            <p>Blandit nunc tempor lobortis nunc non. Mi accumsan. Justo aliquet massa adipiscing cubilia eu accumsan id. Arcu accumsan faucibus vis ultricies adipiscing ornare ut. Mi accumsan justo aliquet.</p>
                            <ul class="icons">
                                <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                                <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                                <li><a href="#" class="icon fa-linkedin"><span class="label">LinkedIn</span></a></li>
                                <li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <ul class="copyright">
                        <li>&copy; Untitled. All rights reserved.</li>
                    </ul>
                </div>
            </footer>

I am trying to use data-sly-repeat to loop and I have verified that the value of colNum is 2 but still the loop is running only once. In other words, it doesn't loop through irrespective of the value. I also hardcoded the value 3 but it still won't run the loop more than once. Not sure what I am doing wrong here.

Thanks in advance

Answer 1

It seems you have misunderstood how data-sly-repeat is intended to be used. You can read their documentation to get clarification.

Two things:

1. data-sly-repeat repeats the whole element that is marked, while data-sly-list only repeats the content of the element. In your case it seems list is more appropriate.. You can eliminate the actual div that you are currently unwrapping.

2. Rather than passing in a number of times to repeat the HTML you pass in a list of things to iterate over. The html is rendered for each item in the list, with the ${item} variable being used to hold the current item.

So, you'll have to write some Java of JS code to turn your colNum into a list of that size.

For example, using the JS Use API. (see this question for ways to create empty iterable arrays)

"use strict";
use(function () {
    let n = properties.get("colNum", 0);
    return {
        columns: [...Array(100)] // empty, iterable, array of size n
    };
});

And calling it from the HTL. Notice I removed the extraneous div and am using data-sly-list to loop over the n length array of empty elements

<div class="row collapse-at-2"
     data-sly-use.config="<JS-file-name>"
     data-sly-list="${config.columns}">
    <div class="6u">
        <h3>Accumsan</h3>
        <ul class="alt">
            <li><a href="#">Nascetur nunc varius</a></li>
            <li><a href="#">Vis faucibus sed tempor</a></li>
            <li><a href="#">Massa amet lobortis vel</a></li>
            <li><a href="#">Nascetur nunc varius</a></li>
        </ul>
    </div>
</div>

Answer 2

data-sly-repeat needs an iterable object. You can provide a dummy array with the needed number of elements or, even better, an array with usefull things, such as column names or data.

Answer 3

In sightly you can only iterate over a collection using sly-repeat or sly-list.So instead here instead using the ColNum directly you will have to make a simple collection . Refer: https://docs.adobe.com/docs/en/htl/docs/block-statements.html